a-frame學習筆記

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>