走進 Web VR 技術

VR 是近幾年人們多少都會談論到一兩次的技術。不過到今天為止他似乎還沒有走進我們的生活，沒有像手機那樣普及，我們接觸他更多是體驗。我想原因可能很多，可能是昂貴的價格，可能是除遊戲和電影外沒有其他應用，可能是重重頭盔，也可能是看久會頭暈目眩。以上僅是我個人對 VR 的感受。

在 web 上實現 VR 的好處是成本低，跨平台容易實現，缺點是難於實現高畫質，其性能差。不過隨著 webAssemble 和 webGL 技術出現和發展，我相信這些問題會得到改善和解決。

目標：通過示例介紹如何使用 A-frame 搭建 web VR 應用

開發工具：vistual studio code （微軟產品）

使用框架 ：A-frame

官方示例截圖

項目創建比較容易，我們開發基本網頁沒有任何區別，只要引入 aframe 文件就可以了。

開始我們需要搭建場景（a-scene），場景概念和動畫和電影中場景相同，我們的人物和物件都需要在放置在這個場景中。

然後在場景中放置一個 box ，a-box 通過提供的屬性來定義box 位置，渲染和縮放。在 a-frame 中坐標系如下圖。看坐標系對比 a-box 參數就不難理解和想像box 會是什麼樣的

好我們的 hello box 就完成了，大家會注意到在屏幕右下方有一個眼鏡圖標。如果我們在手機中打開網頁，然後橫屏顯示網頁，再將手機放入 VR 眼鏡（最便宜的， 20 多元就行，也可以拿紙殼做一個）來看 3D 效果。我們這是通過滑鼠（也可以 ctrl + 方向鍵）移動會旋轉視圖來從不同角度觀察 box。

添加場景

A-frame 中也提供了開發組件功能，這樣開發者可以復用和分享組件。

現在我們 box 只是單一顏色，可以為 box 在顏色基礎上加紋理貼圖，讓 box 看上去更加真實。

首先選擇一張貼圖作為 box 紋理

然後就可以在 box 使用該紋理圖片

這樣 box 上就出現了磚的紋理

為了便於管理和復用圖片，我們把所有圖片（素材）放置 標籤內備用，給圖片 img 一個id以便於引用。然後我們就可以在 box 通過id 來獲取這張圖片作為紋理貼圖了。

我們現在自定義一個背景，先將先前的森林環境去掉

先後選擇一張環形貼圖作為背景貼圖

在使用 a-plane 創建一個平面來作為地面，背景圖片作為素材放置 a-assets 標籤中供 a-sky 使用。

這是地面貼圖

可以通過 repeat 屬性定義圖片重複次數，這樣可以模擬瓷磚效果。

看一看效果吧

在電影場景中，除了自然光外，還需打很多有一定功能的燈來營造氛圍，我們也可以通過 a-light 標籤來開啟燈光營造氛圍。這裡我們開啟一個是漫反射燈和一個點光源，熟悉 3d max 應該對他們不陌生。

看效果，我們這裡就是為了測試，要通過放置燈來達到最終想要的效果還需要反覆調試。

也可以通過 animation 標籤添加動畫。

在玩VR遊戲中我們通過移動眼鏡或手中的控制器實現與遊戲交互，我們這裡來定義camer 標籤來控制我們移動的視角，其中添加 cursor 標籤（可以看作滑鼠的圖標）與場景中人物交互。圖中不算清晰，起始有一個小黑色空心的圈圖標。

交互也非常簡單，我們只需獲取 box 然後添加事件，然後當我們的圖標移動到box上就是執行動作。

也可以將事件作為組件（屬性），已備使用

在 box 中只要添加屬性並賦值，就會達到上面相同的效果

今天就到這裡，開始工作了！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！