webAR/VR系列開發(fā)教程（1） 小白入坑篇

時間：2023-05-28 19:45:02 | 來源：網站運營

時間：2023-05-28 19:45:02 來源：網站運營

webAR/VR系列開發(fā)教程（1） 小白入坑篇：序言：如今的AR和VR發(fā)展迅速，但是每個都要一定的局限性，在大多數的的情況下，AR體驗都需要客戶下載特定的軟件來使用，我想，超過90%的人都不愿意拿出手機去掃描下載一個軟件專門體驗一個程序。但是webAR的快捷性為用戶的體驗提高了一個層次，還能類似病毒式的傳播自己的項目。所以快畢業(yè)了，打算將自己學的東西結合起來。寫一個系列文章分享一下自己的項目。后面會折騰webAR+云識別， 全息，裸眼等相關開發(fā)文章。歡迎大家和我一起探討。

第一章：AR.js新手入門介紹

為什么使用AR.js：在現在的webAR發(fā)展中，我個人覺得，隸屬easyAR和AR.js兩者比較成熟。但是兩者之間各有優(yōu)缺點。我在開發(fā)過程中發(fā)現，1.easyAR在手機端瀏覽器的獲取攝像頭權限比AR.js好，主要針對谷歌瀏覽和蘋果siri瀏覽器的測試。為什么會這樣。后面文章會介紹和重點解決攝像頭獲取和顯示的問題。2.easyAR的識別功能收費。而AR.js是完全開源的。3.easyAR識別無法實習物體跟隨（目前為止），AR.js識別成功后能實現物體跟隨。

2.第二章：AR.js的使用

1.先到AR.js開源項目中下載項目：下載地址為：AR.js下載地址。

2.點擊下載鏈接后如下圖所示操作：

3.AR.js 使用的主體框架會在后面逐一介紹并且如何使用。下載項目壓縮包后。就要安裝本地web服務了。我推薦使用phpstudy一鍵安裝。具體步驟如下圖：

點擊下載地址進行軟件下載。如有不明白之處，可＋最下方作者qq聯系。

4.phpstudy安裝使用教程。過程如下所示：

點擊解壓下載好的phpstudy安裝包。如下圖。個人建議小白默認安裝路徑：

安裝完成后。找到自己的安裝路徑。如我的路徑是C：/phpstudy

5.到上面這一步標明已經啟動了本地web服務。接下來。我們需要配置本地網站路徑。如下圖過程所示：

點擊mysql管理器：

點擊站點域名管理：出現如下圖所示。然后點擊新增，網站目錄可以自己定義，小白建議默認。

最后點擊保存。然后開始找到你的網站根目錄下：

記住一點：phpstudy運行程序不能關閉，保持一直運行

我的根目錄如下，

打開電腦瀏覽器，輸入127.0.0.1測試自己的web環(huán)境是否正常：如下圖所以

到這一步為主，你的web環(huán)境配置好了。別驕傲，這只是建高樓大夏中的一塊石頭，接下來，就是將AR.js項目壓縮包解壓。放進我們的網站根目錄下運行體驗了：

6.運行AR.js 找到下載好的AR.js項目壓縮包。解決后如下圖所示：

復制文件夾內的所有文件。粘貼到我們的網站根目錄下：如下圖所示：

到這一步，環(huán)境已經全部配置完成。開始體驗了，本地路徑如下。想體驗其他案例只需更改后面的html文件。example文件夾下面很大案例：

掃描該圖片體驗：

7.還有一點是。小伙伴們說我想在手機上體驗咋辦。沒問題，下面教你如何做;

首先。確保你手機和你的電腦是連同一個網絡，意思就是同一個局域網內，包括連相同的一個wifi。然后打開你的電腦，右擊左下角的微軟田。如下所示：

點擊運行：

手動輸入cmd。點擊確定后，輸入ipconfig如下圖：找到電腦的ipv4地址：

然后將該地址http://127.0.0.1/aframe/examples/mobile-performance.html改為http://192.168.168.113/aframe/examples/mobile-performance.html 使用你的ipv4替換本地地址，最好使用你的手機瀏覽器打開該地址。就可以在手機上面體驗了。結果效果圖以后會跟新上來。

總結：這是開發(fā)過程的的基礎教程。為后面的系列教程打下基礎。小白可以跟體驗一下。獲取成就感，大神可以跳過該入門教程，歡迎來到下面的開發(fā)教程一起討論。建大夏也要一磚一瓦來。下一展介紹aframe的aframe-watcher叫環(huán)境配置和使用教程，完善webAR的開發(fā)環(huán)境，提高開發(fā)速度。

最后。歡迎有興趣的朋友加作者QQ一起討論學習。相信著那個相信著自己的自己。