A-Frame

• 2015 年底由 Mozilla 推出的 WebVR framework。

• 背後由Three.js實現，但開發端只需用純HTML的方式來撰寫，且補足Three.js本身對「VR」功能需求的不足處。

• 持續積極被維護中，也已趨穩定，市場上瀏覽器裝置普及率高。

應用範例

VR

by. Casey Yee

應用範例

Game

by. Realise

應用範例

商業

by. iStaging

技術入門

Hello World — A-Frame & Vue

• <a-box>
• <a-camera>
• <a-circle>
• <a-collada-model>
• <a-cone>
• <a-cursor>
• <a-curvedimage>
• <a-cylinder>
• <a-dodecahedron>
• <a-image>
• <a-light>
• <a-obj-model>

• <a-octahedron>
• <a-plane>
• <a-ring>
• <a-sky>
• <a-sound>
• <a-sphere>
• <a-tetrahedron>
• <a-torus-knot>
• <a-torus>
• <a-video>
• <a-videosphere>

Primitives

Asset Management System

<a-scene>

  <!-- Asset management system. -->
  <a-assets>

    <a-asset-item id="horse-obj" src="horse.obj"></a-asset-item>
    <a-asset-item id="horse-mtl" src="horse.mtl"></a-asset-item>

    <img id="advertisement" src="ad.png">
    <audio id="neigh" src="neigh.mp3"></a-mixin>
    <video id="kentucky-derby" src="derby.mp4">

  </a-assets>

  <!-- Scene. -->
  <a-entity obj-model="obj: #horse-obj; mtl: #horse.mtl"></a-entity>

  <a-plane src="#advertisement"></a-plane>
  <a-sound src="#neigh"></a-sound>
  <a-entity geometry="primitive: plane" material="src: #kentucky-derby"></a-entity>

</a-scene>

Mixins

<a-scene>

  <a-assets>
    <a-mixin id="red" material="color: red"></a-mixin>
    <a-mixin id="blue" material="color: blue"></a-mixin>
    <a-mixin id="cube" geometry="primitive: box"></a-mixin>
  </a-assets>

  <a-entity mixin="red cube"></a-entity>

  <a-entity mixin="blue cube"></a-entity>

</a-scene>

Animations

<a-entity>

  <a-entity id="ani-cube" geometry="primitive: box">

    <a-animation attribute="rotation"
               dur="10000"
               fill="forwards"
               to="0 360 0"
               easing="ease-out"
               repeat="indefinite"></a-animation>

    <a-animation begin="fly_up" attribute="position"
        from="0 0 0" to="0 3 0" dur="1000"></a-animation>

  </a-entity>

</a-entity>

    document.querySelector('#ani-cube').emit('fly_up');

Trigger Animation

WebVR的近未來

33m19s

React VR

Subtitle