建置基本場景

Adding a Box

<a-scene>
  <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>

Transforming the Box

• Positive X-axis as “right”
• Positive Y-axis as “up”
• Positive Z-axis as going out of the screen towards us

• <a-scene>
    <a-box color="#6173F4" width="4" height="10" depth="2"
           position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"></a-box>
  </a-scene>

Applying a Texture to the Box

<a-scene>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="texture.png"></a-box>
</a-scene>

由於放置 textture.png 在網路平台上須有pro的權限(須繳年費)，故將程式下載至本機，但由於本機無法執行web 功能，故須將目錄與圖檔放在同一目錄，再放至google雲端空間，開啟可以瀏覽的權限，並用以下的網址組合來瀏覽

http://googledrive.com/host/目錄的ID/index.html

用asset management system 改寫上述程式，並直接在google 雲端硬上編輯，可以增加雲端硬碟工具HTMLeditey，在index.html上直接編輯並自動儲存

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture"></a-box>
</a-scene>

Animating the Box

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <a-animation attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
  </a-box>
</a-scene>

Interacting with the Box

//按一下開始旋轉

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <!-- Animation will only play when the box is clicked. -->
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
  </a-box>
  <a-camera position="0 1.8 0">
  <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

//眼精看到後box變大，離開後回復

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
    <!-- The box will change scale when it emits the mouseenter event. -->
    <a-event name="mouseenter" scale="4 1 6"></a-event>
    <a-event name="mouseleave" scale="2 0.5 3"></a-event>
  </a-box>
  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

Adding a Background to the Scene

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <!-- Animation will only play when the box is clicked. -->
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
    <a-event name="mouseenter" scale="4 1 6"></a-event>
  </a-box>
  <!-- New lights. -->
  <a-sky color="#73F7DD"></a-sky>
  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

預覽上述成果