你想通過網路實現擴增實境嗎？現在你只需要 10 行 HTML 程式碼！真的！讓我帶你看一看程式碼，非常簡單。
我們最近釋出了AR.js。你不需要安裝任何應用，用你的手機通過網路就能體驗到強大的擴增實境。但讓我們更進一步，看一下如何讓你也創作出自己的擴增實境體驗。多虧了神奇的a-frame，最短的 AR.js 只有 10 行 HTML 程式碼。你可以在codepen看到線上版：
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 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 embedded artoolkit='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> |
我們來一行一行看.
引入庫
|
1 2 3 |
<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
|
1 2 3 |
<body style='margin : 0px; overflow: hidden;'> <!-- ... --> </body> |
這一步，國際慣例。就像你在所有 HTML 頁面中做的一樣，定義 body。
建立 3d 場景
|
1 2 3 |
<a-scene embedded artoolkit='sourceType: webcam;'> <!-- put your 3d content here --> </a-scene> |
然後，我們將要建立我們的 a-farme 場景。我們當然也需要加入 ARToolkit 元件。ARToolkit是一個開源庫，我們通過它來實現攝像頭定位。
新增簡單的內容
|
1 |
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box> |
一旦我們建立了 3d 場景，我們可以開始向裡面新增物件。在這行程式碼中，我們新增了一個簡單的盒子。然後我們修改了它的材質，讓它變得透明。我們也改變了它的位置，所以它出現在 AR 標識（AR marker）的上方。
（視訊截圖）
增加 AR 攝像頭
|
1 |
<a-marker-camera preset='hiro'></a-marker-camera> |
在最後一步，我們增加一個攝像頭。我們預設一個 ‘hiro’（來自Hiro marker）最後，我們讓它像你手機一樣移動。是不是很簡單？
恭喜！你完成了。你僅用了 10 行 HTML 程式碼實現了擴增實境，手機上也能執行飛快，而且免費。
可以看一下我做的視訊教程（搬運自youtube，字幕為 youtube 自動識別內嵌字幕，有少量識別誤差，不影響觀看）：
https://www.bilibili.com/video/av9821430/
（一些截圖）
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
