超疫計畫WebVR線上工作坊指南

什麼是WebVR？

WebVR是一項實驗性的JavaScript API，可以利用網頁瀏覽器提供支援各種虛擬實境裝置（如HTC Vive、Oculus Rift或Google Cardboard）。WebVR的實現需要3個前置條件：WebVR API、網路瀏覽器支持和VR顯示器支持。這項技術的優點，從低進入門檻與開發成本、應用範圍廣泛、無安裝包、易於維護與擴充，到跨平台、隨連隨用等特性，大幅拓展了虛擬實境的應用與發展面向。但因WebVR體驗仰賴於網路瀏覽器與連線速度，目前WebGL在繪圖解析度上還無法勾勒出栩栩如生的視覺效果，對於愛好高解析度與擬真感的觀眾缺乏衝擊力。不過因為只要有可連網的行動裝置就能體驗，並可連接專業VR顯示器，在流通上比起傳統VR更有彈性與親和力。

什麼是A-Frame？

A-Frame是一個用於搭建虛擬實境(VR)體驗的開源網路框架，開發者可使用HTML來創建3D和WebVR場景。 HTML環境為Web開發者和設計師提供了一個熟悉的創作工具，同時結合了Unity等引擎使用的流行遊戲開發模式。 A-Frame以Three.js為基礎，最初是在2015年中後期Mozilla VR團隊內部開發的。創建A-Frame的目的是為了讓網絡開發者和設計師能夠在不了解WebGL的情況下，用HTML編寫3D和VR體驗。為了能對我們的工作網頁進行即時編譯，我們將使用Glitch平台-它是一個可從網頁端瀏覽器直接編寫程式的線上協作工具，並可為用戶託管網頁與即時查看程式效果。

A-Frame筆記

空模板

Aframe - cursor 光標

Aframe - inspector （圖形編輯器）筆記

Aframe - 基本場景 practice-1筆記

AFrame -聲音筆記 Sound Notes

Aframe - material 3D 模型貼圖的筆記

Glitch平台與Aframe操作說明（asset、帳號、remix）

講解entity概念

A-Frame基於Three.js框架，並且使用了實體-組件-系統（entity-component-system）（ECS）架構。 ECS架構是三維遊戲中常見且理想的設計模式，遵循組合模式要好於繼承和層次結構的設計原則
- 實體（Entities）是是容器對象，用來包含組件。實體是場景中所有對象的基礎。沒有附加組件的實體不會渲染任何東西，類似於空的**<div>**。
- 組件（Components） 是可重用的模組或數據容器，可以依附於實體以提供外觀、行為和/或功能。組件就像即插即用的對象。所有的邏輯都是通過組件實現，並通過混合、匹配和配置組件來定義不同類型的對象。像煉金術那樣！
- 系统（Systems）為組件類提供全局範圍、管理和服務。系統通常是可選的，但我們可以使用它們來分離邏輯和數據；系統處理邏輯（有點類似控制器或者服務層的角色），組件充當數據容器。
A-Frame擁有代表ECS每個方面的API (Application programming interface應用程序接口, (電腦需要調用手機裡面的信息，這時候你會拿一根數據線將電腦手機連接起來，電腦和手機上連接數據線的接口就是傳說中的API接口))：
- 實體（Entities） 對應的是 <a-entity> 元素和原型。
- **組件（Components）**通過 **<a-entity>的HTML屬性來表示。底層實現上，組件是包含模式（schema）、生命週期處理器和方法的對象。組件通過AFRAME.registerComponent (name, definition)**API來註冊。
- **系統（Systems）**通過 **<a-scene>**的HTML屬性來表示。系統在定義上和組件類似，系統通過 AFRAME.registerSystem (name, definition) API來註冊。
如何上傳Asset
網頁語法（HTML, CSS與JS）

<!DOCTYPE HTML>是html5標準網頁聲明，全稱為Document Type HyperText Mark-up Language。在<html>標籤之前告訴瀏覽器的解析器應使用什麼樣的文檔類型來解析文檔。

若想使用Oculus的VR設備：

<script>
if (location.protocol != 'https:') {
 location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
}
</script>

在Glitch上以A-Frame框架創建一個WebVR環境

導入A-frame庫
導入aframe-extras.min.js**-增加控制功能（因為是網頁語法，很好擴充）**

創建一個box

<a-box></a-box>
<a-entity geometry="primitiveL:box" position="0 0 -2"><a-entity>