Open in app

Sign in

Write

Sign in

Simple Animated Cube in A-Frame [170803]

NOTE: A-Frame Basics

emily leung
PROJECT REDBACK
Published in
4 min readAug 3, 2017

--

NOTE 0006— Thursday 03 August 2017

Code referenced from Sonar Systems Youtube Channel: https://www.youtube.com/channel/UCkJYfCcenyjHr3DZ9JWHbkQ

Boilerplate Setup of A-Frame Scene

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
  </a-scene>
</body></html>

Drawing a Box

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene> 
    <a-box color:"red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
  </a-scene>
</body></html>
<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene> 
    <a-box color:"#03A9F4" width="2" height="1" depth="1"></a-box>
  </a-scene>
</body></html>

Transformations

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene> 
    <a-box color:"#03A9F4" width="2" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"></a-box>
  </a-scene>
</body></html>

Textures

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene> 
    <a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="img/texture.jpg"></a-box> 
    <!-- Above is not recommended for textures. -->
  </a-scene>
</body></html>
<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
       <img id="texture" src="img/texture.jpg">
    </a-assets>    <a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="#texture"></box>
  </a-scene>
</body></html>

Animations (Rotation)

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
       <img id="texture" src="img/texture.jpg">
    </a-assets>    <a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="#texture">
       <a-animation attribute="rotation" repeat="indefinite" to="2 360 0"></a-animation>
    </box>
  </a-scene>
</body></html>

Interacting with Objects

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
       <img id="texture" src="img/texture.jpg">
    </a-assets><a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="#texture">
       <a-animation attribute="rotation" begin="click" repeat="indefinite" to="2 360 0"></a-animation>
    </box>
    <a-camera position="0 7 5">
      <a-cursor color="#FF0000" />
    </a-camera>  </a-scene>
</body></html>
<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
       <img id="texture" src="img/texture.jpg">
    </a-assets><a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="#texture">
       <a-animation attribute="rotation" begin="click" repeat="indefinite" to="2 360 0"></a-animation>
      <a-event name="mouseenter" scale="4 1 6"></a-event>
    </box>
    <a-camera position="0 7 5">
      <a-cursor color="#FF0000" />
    </a-camera></a-scene>
</body></html>
<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
       <img id="texture" src="img/texture.jpg">
    </a-assets><a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="#texture">
       <a-animation attribute="rotation" begin="click" repeat="indefinite" to="2 360 0"></a-animation>
      <!-- <a-event name="mouseenter" scale="4 1 6"></a-event> -->
    </box>
    <a-camera position="0 7 5">
      <a-cursor color="#FF0000" />
    </a-camera>  </a-scene>
  <script>
      var box = document.querySelector('a-box');
      box.addEventListener("mouseenter", function()
      {
        box.setAttribute("scale",
        {
          x: 0.5,
          y: 2,
          z: 5.9,
        });
      });
  </script></body></html>

Lighting

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
       <img id="texture" src="img/texture.jpg">
    </a-assets><a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="#texture">
       <a-animation attribute="rotation" begin="click" repeat="indefinite" to="2 360 0"></a-animation>
      <a-event name="mouseenter" scale="4 1 6"></a-event>
    </box>
    <a-camera position="0 7 5">
      <a-cursor color="#FF0000" />
    </a-camera>
    <a-light type="spot" color="#FF0000" position="-10 0 0" look-at="a-box"></a-light>
    <a-light type="point" color="#00FF00" position="0 5 0"></a-light>
</a-scene></body></html>

Skybox

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
       <img id="texture" src="img/texture.jpg">
    </a-assets><a-box color:"red" width="1" height="1" depth="1"
           position="0 5 0" rotation="45 45 45" scale="1 2.5 1"
           src="#texture">
       <a-animation attribute="rotation" begin="click" repeat="indefinite" to="2 360 0"></a-animation>
      <a-event name="mouseenter" scale="4 1 6"></a-event>
    </box>
    <a-camera position="0 7 5">
      <a-cursor color="#FF0000" />
    </a-camera>
    <a-light type="spot" color="#FF0000" position="-10 0 0" look-at="a-box"></a-light>
    <a-light type="point" color="#00FF00" position="0 5 0"></a-light>
    <a-sky src="img/sky.jpg" color="red"></a-sky>
</a-scene></body></html>

Model Loading

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
      <a-assets>
        <a-asset-item id="object" src="models/aztec-temple.obj"></a-asset-item>
        <a-asset-item id="material" src="models/aztec-temple.mtl"></a-asset-item>
      </a-assets>
    <a-obj-model src="#object" mtl="#material"></a-obj-model>
  </a-scene>
</body></html>

Image

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
      <img id="my-image" src="img/BatmanVSuperman.jpg" />
    </a-assets>
    <a-image src="#my-image" width="16" height="9"></a-image>
  </a-scene>
</body></html>

Curved Image

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
      <img id="my-image" src="img/BatmanVSuperman.jpg" />
    </a-assets>
    <a-curvedimage src="#my-image" height="15" radius="5.7" theta-length="361" rotation="0 150 0" scale="0.8 0.8 0.8" position="0 2 5"></a-curvedimage>
  </a-scene>
</body></html>

Video

<!DOCTYPE>
<html>
  <meta name="apple-mobile-web-app-capable"/><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
      <video id="video" autoplay loop="true" src="video/video.mp4 webkit-playsinline />
    </a-assets>    <a-video src="#video" width="16" height="9" position="0 1 -1"></a-video>
  </a-scene>
</body></html>

Video Sphere

<!DOCTYPE>
<html>
  <meta name="apple-mobile-web-app-capable"/><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
      <video id="spherevideo" autoplay loop="true" src="video/SphereVideo.webm webkit-playsinline />
    </a-assets>    <a-video src="#spherevideo"></a-video>
  </a-scene>
</body></html>

Plane

<!DOCTYPE>
<html>
  <meta name="apple-mobile-web-app-capable"/><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
      <img id="texture" src="img/BatmanVSuperman.jpg" />
    </a-assets>    <!-- Basic Plane with a colour. -->
    <a-plane color="red" height="20" width="20"></a-plane>    <!-- Textured Plane. -->
    <a-plane src="#texture" height="20" width="20"></a-plane>    <a-entity position="0 0 40">
      <a-camera></a-camera>
    </a-entity>  </a-scene>
</body></html>

Object Loading

<!DOCTYPE>
<html>
  <meta name="apple-mobile-web-app-capable"/><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
    <a-assets>
      <a-asset-item id="object" src="models/pokeball-vray.obj"></a-asset-item>
      <a-asset-item id="material" src="models/pokeball-vray.mtl"></a-asset-item>
      <a-obj-model src="#object" mtl="#material"></a-obj-model>
      <a-entity position="0 200 150">
        <a-camera></a-camera>
      </a-entity>
    </a-assets>
  </a-scene>
</body></html>

© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.

Last modified on Thursday 03 August 2017

Architecture
Computational Design
Field Notes
Project Thesis
Notebook

--

--

emily leung
PROJECT REDBACK

Written by emily leung

70 Followers

Instagram: @ emily_y_leung

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams