A-frame
概觀
A-Frame是在網絡上創建3D和虛擬現實體驗的開源框架。它由內置MozVR團隊更迅速地原型WebVR經驗，我們問自己“什么會在網絡上的虛擬現實是什么樣子？”。正如今天在網絡上，我們點擊鏈接從一個頁面跳轉到頁面，有一天我們將通過門戶網站步行從世界跳轉到世界各地。並有世界之間，我們需要WebVR內容跳轉。不幸的是，只有在世界WebGL的開發商屈指可數，但也有幾百萬的Web開發人員，網頁設計師和3D藝術家。a-aframe使VR內容創作到每個人手中。
A-frame是一個實體組件系統基於three.js所使用DOM界面框架。在A-frame里一切都是實體，我們插入組件，可以隨意撰寫外觀，行為和功能集成。
其項目依賴document-register-element
Document-register-element獨立工作的W3C自定義元素規范的輕量級版本,有了它我們可以自定義我們的html標簽
a-scene
封裝了所有的webGL底層API實現的全景布局，比如VR模式，是根據檢測navigator.getVRDisplays() （檢測任何可用的VR設備連接到計算機）
一個場景是由a-scene創建的，是全景渲染的根對象，所有的元素都放在a-scene這個組件里
<a-scene> </a-scene>
a-sky
每一個場景都需要一個背景，可以直接放置src為全景圖片，或者直接渲染color值
<a-sky color="#cccccc" src="images/3video.jpg"></a-sky>
a-box a-assets
通過<a-assets> 標記將紋理添加到我們的長方體、圓柱和球等原型上
盒子，創建形狀，如框、多維數據集或牆壁。這是一個實體，它規定了幾何與幾何基元組框。
定義一個盒子的形狀大小顏色值img可以以ID的形式引用它，然后渲染圖片到這個形狀上
<a-assets>
<img id="texture" src="images/3video.jpg" alt="">
</a-assets>
<!--定義一個盒子-->
<a-box src="#texture" color="#B76705" depth="2"height="2" width="4" position="0 0 -1.25"></a-box>
a-cylinder
圓柱體，它可用於創建管和曲面。
<!--添加一根柱子-->
<a-cylinder color="yellow" height="40" open-ended="true" radius="0.5" position="-40 0 -8"></a-cylinder>
<!-- Basic cylinder. -->
<a-cylinder color="crimson" height="8" radius="1.5" position="-40 0 8"></a-cylinder>
<!-- Hexagon. -->
<a-cylinder color="cyan" segments-radial="8"></a-cylinder>
<!-- Pac-man. -->
<a-cylinder color="yellow" theta-start="100" theta-length="280" side="double" position="-20 0 8"></a-cylinder>
<!-- Green pipe. -->
<a-cylinder color="green" open-ended="true"></a-cylinder>
a-sphere
創建一個球形
<a-assets>
<img id="darktexture" src="images/5video.jpg" alt="">
</a-assets>
<a-sphere src="#darktexture" segments-height='18' segments-width='36'
color="" radius="2" position="20 0 20"></a-sphere>
a-camera
規定相機組件與控件相關的組件的映射。
<a-box look-at="#camera"></a-box>
<a-camera id="camera"></a-camera>
<!--or-->
<a-entity position="0 0 0">
<a-camera></a-camera>
</a-entity>
a-collada-model
a-collada-model從一個3D建模程序創建或從web下載COLLADA模型。這是一個實體，src指向模型的.dae文件
<a-scene>
<a-assets>
<a-asset-item id="tree" src="model/tree1.dae"></a-asset-item>
</a-assets>
<!-- Using the asset management system. -->
<a-collada-model src="#tree" position="1 0 -1"rotation="0 30 0" scale="1.4 1.4 1.4"></a-collada-model>
<!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
<a-collada-model src="tree1.dae"></a-collada-model>
</a-scene>
A-cone
創建一個錐的形狀。 這是一個實體，規定錐的幾何與幾何原始設置。設置渲染紋理
<a-assets>
<img id="texture" src="images/icon.png">
</a-assets>
<!-- Basic cone. -->
<a-cone color="pink" radius-bottom="2" radius-top="0.5"></a-cone>
<!-- Textured box. -->
<a-cone src="#texture"></a-cone>
可以單獨這樣定義一個錐形
<a-cone position="0 0 -20" rotation="35 45 30" height="10" radius-top="2"
radius-bottom="10" color="#F3BA8D"></a-cone>