你想通過網絡實現增強現實嗎？現在你只需要 10 行 HTML 代碼！真的！讓我帶你看一看代碼，非常簡單。
我們最近發佈了AR.js。你不需要安裝任何應用，用你的手機通過網絡就能體驗到強大的增強現實。但讓我們更進一步，看一下如何讓你也創作出自己的增強現實體驗。多虧了神奇的a-frame，最短的 AR.js 只有 10 行 HTML 代碼。你可以在codepen看到在線版：
XHTML
| 12345678910 | <!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js --><script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script><script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script><script>THREEx.ArToolkitContext.baseURL='https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script><body style='margin : 0px; overflow: hidden;'><a-scene embeddedartoolkit='sourceType: webcam;'><a-box position='0 0.5 0'material='opacity: 0.5;'></a-box><a-marker-camera preset='hiro'></a-marker-camera></a-scene></body> |
我們來一行一行看.
引入庫
XHTML
| 123 | <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script><script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script><script>THREEx.ArToolkitContext.baseURL='https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script> |
首先，你需要引入a-frame，一款MozillaVR引領的開發 VR 體驗的利器。A-frame 包含了 three.js。然後你只需要為 a-frame 引入 AR.js。AR.js能讓 AR 中的 3d 顯示在你的手機上高速運行，哪怕是 2、3 年前的舊手機。
定義 Body
XHTML
| 123 | <body style='margin : 0px; overflow: hidden;'><!-- ... --></body> |
這一步，國際慣例。就像你在所有 HTML 頁面中做的一樣，定義 body。
創建 3d 場景
XHTML
| 123 | <a-scene embeddedartoolkit='sourceType: webcam;'><!-- put your 3d content here --></a-scene> |
然後，我們將要創建我們的 a-farme 場景。我們當然也需要加入 ARToolkit 組件。ARToolkit是一個開源庫，我們通過它來實現攝像頭定位。
添加簡單的內容
XHTML
| 1 | <a-box position='0 0.5 0'material='opacity: 0.5;'></a-box> |
一旦我們創建了 3d 場景，我們可以開始向裡面添加對象。在這行代碼中，我們添加了一個簡單的盒子。然後我們修改了它的材質，讓它變得透明。我們也改變了它的位置，所以它出現在 AR 標識（AR marker）的上方。
（視頻截圖）
增加 AR 攝像頭
XHTML
| 1 | <a-marker-camera preset='hiro'></a-marker-camera> |
在最後一步，我們增加一個攝像頭。我們預設一個 ‘hiro’（來自Hiro marker）最後，我們讓它像你手機一樣移動。是不是很簡單？
恭喜！你完成了。你僅用了 10 行 HTML 代碼實現了增強現實，手機上也能運行飛快，而且免費。
（一些截圖）
FROM：伯樂在線 - 孫騰浩 翻譯，艾凌風 校稿
英文出處：Alexandra Etienne