Aframe Template Code

Virtual Reality

Aframe Template Code

Copy this code into glitch to catch up with the class.

<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/aframe-text-geometry-component@^0.5.0/dist/aframe-text-geometry-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <!--   Images       -->
        <!--    Here is where we add all of our pictures, audio and other media     -->
        <img id="texture" src="https://i.imgur.com/mYmmbrp.jpg">
        <a-asset-item id="fortnite" src="https://s3.amazonaws.com/tag-3d-assets/fortnite-character/scene.gltf"></a-asset-item>
        <a-asset-item id="lambo" src="https://s3.amazonaws.com/tag-3d-assets/lambo/scene.gltf"></a-asset-item>
        <audio src="https://s3.amazonaws.com/tag-audio-assets/creepy.wav" loop autoplay preload></audio>
      </a-assets>
      <!--  We add everything here!  -->
      <a-box color="#4286f4" position="0 0 -10" scale="10 10 10" rotation="0 0 0"></a-box>
      <a-entity environment="preset: egypt; skyColor: #445; groundColor: #445; groundColor2: #6d3957; ground: canyon;"></a-entity>
      <a-box src="#texture" position="10 0 -5" rotation="0 0 0" scale="1 1 1"></a-box>
      <a-sphere color="red" position="5 0 -5" rotation="0 0 0" scale="1 1 1"></a-sphere>
      <a-text value="Hello, A-Frame!" color="red" position="-0.9 2 -3" scale="1.5 1.5 1.5"></a-text>
      <a-entity gltf-model="#fortnite" position="3 0 -3" scale="0.01 0.01 0.01"></a-entity>
      <a-entity gltf-model="#supermarine" position="5 0 -3" scale="0.01 0.01 0.01"></a-entity>
      <a-entity gltf-model="#lambo" position="8 0 -3" scale="1 1 1"></a-entity>      
    </a-scene>
  </body>
</html>

Follow us online