此教材將以 Step-by-step 的方式，透過 Glitch 練習， 協助您快速進入 WebVR 的世界！
除了 ← 與 → 之外，這份教材裡也有 ↑ 及 ↓ 的各節內容：
繼續往 ↓ 瀏覽
- 閱讀文件及 FAQ
- 上中文討論區找幫手
- 到 Slack 尋求同好協助
- 在 Stack Overflow 上發問
- 如果您正在參與工作坊，有問題就直接舉手吧！
繼續往 → 瀏覽
此教材使用 Glitch 作為 A-Frame 的教學用開發環境。
- Glitch 讓你可以在瀏覽器裡直接編寫程式，什麼也不必安裝設定
- Glitch 讓你可以重混別人已經寫好的 A-Frame 專案，不必從零開始
- Glitch 可以存放你的作品，並即刻透過網址（像是
https://aframe.glitch.me）發佈 - Glitch 可以在你更動 A-Frame 專案網站的程式碼時自動更新
- Glitch 可以讓很多人共同編輯同一個專案
如果你想要自己設定本機開發環境，↓ 面有相關說明
你可以在 Glitch 上重混或 fork 既有的專案，以別人做好的東西為新專案的起點。 在開始之前，我們推薦你先將 Glitch 與 GitHub 帳號連結。 編寫完畢後，Glitch 會隨機提供一個網址，這個網址可以進一步修改。
在重混 A-Frame 新手起步專案後，咱們好好看看這個 編寫程式的地方。你還可以修改後端程式、上傳素材、建立新檔，甚至邀請其他人跟你一起寫程式！
看完編輯畫面後，我們來看看專案的成果畫面。
如果你想要下載整個專案的文件，或將專案匯出到 GitHub，請到專案選單裡的 Advanced Options。 點選 Download Project 後會給你一個
.tgz檔，可以拿 ZIP 工具解開取得專案檔案。 對於 A-Frame 專案來說，你想要的東西都會在public/資料夾中，而後端的程式檔案都可以不管。
在下載專案後，如果你想要在自己的電腦上設定 Web 開發環境，那就請繼續往 ↓ 看；
不然，就直接往 → 來開始 A-Frame 之旅吧！
你可以在自己的電腦上設定完整的 Web 開發環境，不見得要仰賴 Glitch 的線上系統。
- 挑個文字編輯器： 拿 Atom 作為入門還不錯
- 安裝本機的伺服器： 您可下載 Mongoose
Server，或在終端機中輸入
python -m SimpleHTTPServer - 建立
index.html檔後複製 Glitch 範例裡的 A-Frame 程式碼過去 - 在 HTML 檔的同一個目錄下執行本機伺服器
- 在瀏覽器中開啟本機伺服器的 URL（例如
http://localhost:8000） - 修改 HTML 檔，然後重新讀取網頁來檢視調整結果
- 選配：可以考慮使用 ngrok 來讓其他網段的任何設備都能存取本機伺服器
如果你還沒有慣用的文字編輯器，Atom 滿適合新手的。 其他熱門的選項還包括 Notepad++、 Sublime、Brackets以及 vim 等。
你會需要在本機安裝 HTTP 伺服器，以便將檔案送到瀏覽器.
你也可以考慮使用 ngrok，在不用瞎搞 IP 位置的情況下方便 於開發給手機使用的 A-Frame 專案。
- 下載並解壓縮 ngrok
- 執行 ngrok，提供本機伺服器的通訊埠號（例如
./ngrok http 8080） - 執行後，ngrok 會提供一串 URL 給你，例如
https://abcdef123456.ngrok.io - 接著就可以在任何網段、任何設備上開啟這個 URL，存取本機伺服器資源了
在桌機或手機上打開 A-Frame 的首頁、 A-Frame 網誌 或 awesome-aframe。
如果你有頭戴型顯示器，請參考 webvr.rocks 來設定 WebVR。
A-Frame 為初學者提供了一些容易使用的 HTML 元素， 我們稱之為 基本型（primitive）。 在下一節裡，我們會藉由調整 HTML 屬性方式來修改些東西（像是改顏色、位置、旋轉、大小等等）， 感受一下整體作業流程。
position定義了物件在 3D 環境的位置（有 X、Y、Z 三個方向軸），單位為公尺。 修改position這個 HTML 屬性值即可，詳情可參考 position 組件的說明。
- 減少
position屬性的 X 值，以便將圓柱體（cylinder）向左移 - 增加
position屬性的 Y 值，以便將正方體（box）向上移 - 減少
position屬性的 Z 值，以便將球體（sphere）向後移 - 加分題： 在
<a-sphere>中加上一個子元素<a-ring>，賦予位置設定後來看看他們之間的相對關係
rotation定義了物件在 3D 環境的旋轉角度（三個值分別為 X、Y、Z 三軸的旋轉角度），單位為度。 旋轉時依據右手定律來看角度，詳情可參考 rotation 組件的說明。
- 調整圓柱體（cylinder）的 X 軸旋轉角度，以便秀出圓柱的底
- 調整正方體（box）的 Y 軸旋轉角度，讓正面朝向鏡頭
- 加分題： 將整個場景的內容用
<a-entity>包起來（作用就像<div>一般），接著調整其旋轉角度，查看個物件的相對旋轉方式
在
<a-scene>裡可以加入其他 HTML 元素，並藉此添增其他基本型。 可參考基本型的相關說明。
- 在左側加上
<a-torus-knot> - 在右側加上
<a-dodecahedron> - 於畫面中間加入
<a-text>
接著我們要為這些物件添加一些圖片材質，看起來會比單純的色彩還讚。你可以在網路上找一些圖 片， 然後上傳到 Glitch 的 assets 區或 cdn.aframe.io。 不管你要傳到哪裡，都記得要透過 HTTPS 傳輸，也要留意 CORS 問題。
接下來在本課程的 Glitch 中 ↓，上圖所列出的素材已經先幫你傳到 assets 裡了。
在 HTML 的
src屬性裡填上圖片的 URL。請參考將圖片設定為材質的 相關說明。
- 為地板
<a-plane>設定圖片材質 - 為每個
<a-box>設定圖片材質 - 為
<a-sphere>設定圖片材質 - 為
<a-cone>設定圖片材質 - 為背景
<a-sky>設定圖片材質，可上 Flickr 的 360° 照片群組 找尋適當圖片。
在任何 A-Frame 場景中，你都可以按下
<ctrl> + <alt> + i來開啟視覺化編輯器， 就跟瀏覽器的開發工具一樣！你可以到首頁的範例集裡挑幾個來試試， 也請參考 Inspector 相關說明。
在右側面板可以調整各實體上的組件設定值，藉此改變實體的外貌或行為。 Inspector 可以辨識出所有 A-Frame 的組件，即使是社群提供的組件亦不例外。 此範例裡有個由社群撰寫的 text-geometry 組件， Inspector 也能正確修改其設定值。
- 選定範例中的某個實體
- 修改其
text-geometry組件 的value值
從 Registry 中可以 找到 physics 組件， 並且直接套用在當前場景中的實體上。 Registry 是編排過的 A-Frame 組件集，而 Inspector 可整合 Registry，直接在實體面板中套用 Registry 收錄的組件。
- 為地板加上
static-body組件 - 為麻花結（後面那個紫色的東西）加上
dynamic-body組件 - 提升麻花結的 Y-position 值，使其位置升高
- 離開 Inspector
在那些好用的基本型之下，A-Frame 採用的是實體-組件的架構。我們回頭看一下 Hello, WebVR 範例，並且嘗試將內容都解構為
<a-entity>及其基礎組件。
- 將
<a-box>代換為擁有 geometry 及 material 組件的<a-entity>，並設定 geometry 組件為primitive: box - 將
<a-sphere>代換為擁有 geometry 及 material 組件的<a-entity>，並設定 geometry 組件為primitive: sphere - 將
<a-cylinder>代換為擁有 geometry 及 material 組件的<a-entity>，並設定 geometry 組件為primitive: cylinder - 將
<a-plane>代換為擁有 geometry 及 material 組件的<a-entity>，並設定 geometry 組件為primitive: plane - 將
<a-sky>代換為擁有 geometry 及 material 組件的<a-entity>，並設定 geometry 組件為primitive: sphere加上radius: 3000。隨後將 material 組件設定為shader: flat，因為我們只需要單色，就不要花時間來計算光線效果了
我們要使用實體及組件的模式，新增一個圓體並令其成為點光源。 要新增這樣的實體，必須混用 geometry、material 及 light 組件。
- 找到
<a-entity id="lightSphere"> - 加上 geometry 組件，並設定為
primitive: sphere - 加上 material 組件，並設定為
color: #FFF及shader: flat - 加上 light 組件，並設定為
type: point - 加分題： 透過
<script>標籤從 Registry 為該實體加上 animation 組件，並設定property: position、dir: alternate及loop: true，且用to: <POSITION>設定移動目的位置（x y z）。
>
Registry 網站是尋找社群組件的好去處， 就像是所謂的外掛模組一樣能為 A-Frame 加強功能。只要從 Registry 找到適當的組件、 複製其 JS 連結、再透過
<script>引入檔案中就可直接在 HTML 裡使用。
- 先加入 Particle
System 組件，為每個
<a-entity>加上particle-system屬性後設定為preset: default與preset: snow， 接著開啟 Inspector 看看效果、調整屬性！ - 加入 Animation 組件，
為球體套用縮放的動畫效果：加上
animation屬性，並設定property: scale、loop: true及to: 1.1 1.1 1.1 - 以
<script>加入 Outline Effect 組件後，在場景加上outline試試。
你可以使用 JavaScript 與 DOM API 來用程式操作、修改實體。A-Frame 不只能玩 HTML，更能透過 JavaScript、DOM API 及 three.js 發揮完整威力。請參閱 Using JavaScript and DOM APIs with A-Frame 一文。
若想看見 JavaScript 的記錄資訊，可以在網頁上按右鍵，點擊檢測元素後，在瀏覽器的開發工具裡切換到主控台。 在檢視成果時，可以透過這個主控台來檢查內容。
使用
document.querySelector()及document.querySelectorAll()取得場景及其中實體的參照。請參閱查詢實體的相關文 件.
- 以
var sceneEl = document.querySelector('a-scene');取得<a-scene>元素的參照 - 以
sceneEl.querySelectorAll('a-entity');取得所有<a-entity>元素的參照 - 以
sceneEl.querySelector('#box');取得該方塊的參照 - 自己試試：用一次
.querySelectorAll()搭配多元素選取符，取得球體跟圓柱體的參照 - 自己試試：為球體跟圓柱體加上 class 後，用一次
.querySelectorAll()取得他們的參照
在上一節的練習後，現在我們使用取回的參照，進一步以
Entity.setAttribute()來修改實體內的屬性。請參閱關於修改實體的相關文 件。
- 試著調整正方體的
rotation組件 - 試著調整圓柱體的
geometry組件之height屬性 - 試著調整球體的
material組件之metalness屬性
使用
document.createElement()建立實體，然後可以用.setAttribute()加以設定，最後以.appendChild()加入場景中。 請參考與建立實體相關的文件說明。
- 採用 JavaScript 的
for迴圈建立 50 個<a-box>，其位置與大小都隨機產生（提示：使用Math.random()）
使用
.addEventListener()來註冊特定事件觸發時的處理函式， 接著再自行觸動該事件，看看處理函式是否正常運作。之後我們可以監聽事件，依據使用者輸入或其他事件來更動場景。 請參考 A-Frame 中使用事件及監聽式的說明文件。
- 監聽正方體的
foo事件，並且在事件觸發時更動正方體的色彩。 - 手動以
Entity.emit()觸發foo，看看正方體是否正確更動色彩。
使用視覺準心的
cursor組件 來提供與實體互動的方式 ，這種方式一般都用在智慧型手機上。 請參考建立 360° 照片集的 相關文件.
這一刻裡，所有事件的監聽式都已經加上去了，您只需要加上個含有 cursor 組件的實體，
以便透過使用者的行為觸發事件即可。需注意，這些事件並非由瀏覽器提供，而是由 A-Frame 提供。
- 加上
<a-camera>實體。先前的範例裡， A-Frame 其實提供了預設的攝影視角。 - 加上
<a-cursor>實體，作為前一個攝影機 的子實體。 - 在桌機上，以滑鼠拖曳視角，讓準心對準面板後點擊滑鼠；在手機上，則只要移動手機注視著面板即可（此即「視覺準心」）。
使用視覺準心之
cursor組件 所提供的click、mouseenter及mouseleave等事件來修改物件的屬性。
Glitch 上的程式已經將專案的結構都設定好了，我們接著要在 handle-events 組件裡（註解所提示的地方）加上 JavaScript 程式。
- 將我們剛剛寫的組件
handle-events加到方塊上。多種監聽、一次滿足 ;) - 在組件內為
mouseenter事件加上監聽式，觸發時更動方塊的顏色 - 在組件內為
mouseleave事件加上監聽式，觸發時恢復方塊的顏色
3D 模型就像是在 3D 或 VR 軟體中的圖片一般，只是比較複雜一點 -- 在 3D 建模軟體（例如 Blender） 中，你可以設定多邊形、材質、素材等等預先建立模型。 我們建議採用 glTF，這是針對 Web 設計的嶄新 3D 檔案格式， 就好像是 3D 模型版的 JPEG 檔一樣。
- 為了預先載入模型，請將
<a-asset-item id="cityModel">的src屬性設定為https://cdn.aframe.io/test-models/models/virtualcity/VC.gltf - 將
<a-gltf-model>的src屬性設定為#cityModel，真正在場景中使用這個模型。
模型有時會帶著動畫。方才加上的模型裡，正帶有許多船隻遊走於城市中的動畫。 我們可以在前一份 Glitch 上加入
animation-mixer這個組件以播放其所有動畫。 接著我們就從上一頁的成果繼續操作。
- 在
<head>中的 A-Frame 程式之後，用個<script>引入animation-mixer組件。目前，這個組件可由 Registry 尋得，或許某天會內建於 A-Frame 之中。https://unpkg.com/[email protected]/dist/aframe-extras.animation-mixer.js - 在
<a-gltf-model>加上animation-mixer屬性以附加組件。預設狀態下，這樣就會將模型所自帶的所有動畫同步播放。
如果你自己建了個 3D 模型，由於當中牽扯許多相互參照的素材或檔案，想要丟上 CDN 來使用可能有點麻煩。 目前我們發現最簡單的方法是直接把東西丟進 GitHub repo、將該 repo 的 master 分支發布為 GitHub Pages， 接著使用
rawgit.com來存取。或者，也可以選擇丟上 Amazon S3。日後這一頁會加上其他相關資訊。
使用手持定位控制器時，hand-controls 組件可以提供沈浸式的互動體驗。我們已經先用 A-Frame 動作捕捉 組件 「錄」了一段手持控制器的行為（包含移動及按鍵），在接下來的 Glitch 中只要把這套預錄的動作加入 就能與場景互動。
- 找出
<a-entity id="left">然後加上 hand-controls 組件， 並且設定為左手（hand-controls="left"） - 找出
<a-entity id="right">然後加上 hand-controls 組件 並且設定為右手（hand-controls="right"） - 檢視結果 - 剛剛加上的雙手會沿著預錄的方式動作。
有很多種組件可以為 hand-controls 組件添增互動方式，例如 controller-cursor, aabb-collider + grab, super-hands 等等。這一課 我們將用 controller-cursor 來讓雙手像是雷射筆一般，可以指向物件。 請延續上一課的 Glitch 繼續操作。
- 為兩隻手都加上
controller-cursor組件 - 接著，在
controller-event-handler組件中，讓方塊在mouseenter事件觸發時改變顏色，而在mouseleave事件觸發時又變回來。
您已經從 A-Frame 學院畢業，在此向您授與非正式的 WebVR 學位。
接著，您可以繼續深入閱讀相關文件，進一步掌握更多技巧，邁向大師之路。