Link to live site
Link to code For this pop quiz, I created a miniature environment through an A-frame preset by editing the code on glitch.com. The main focuses of this pop quiz were to change the default placement and colors of the default models, to add a sky and/or videosphere, and to a gltf model with animations. Unfortunately, the videosphere is spotty and sometimes will not show up. While it can be viewed in a preview pane by changing the script's source release to either 1.2.0 or 1.3.0, it will not work in a new preview window. Code: <html> <head> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script> <script src="inflate.min.js"></script> </head> <body> <a-scene> <a-assets> <a-asset-item id="lizard" src="https://cdn.glitch.global/00823efa-4732-4780-86a3-ebba205fb8a9/lizard.gltf?v=1646772270757" position="0 3 -4"></a-asset-item> <video id="clouds" autoplay loop="true" src="https://cdn.glitch.global/00823efa-4732-4780-86a3-ebba205fb8a9/clouds2.mp4?v=1646775826154"></video> <img id="sky" src="https://cdn.glitch.global/00823efa-4732-4780-86a3-ebba205fb8a9/ref.jpg?v=1646775246127"> </a-assets> <a-box position="-1 2 -3" rotation="60 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#4169E1"></a-sphere> <a-cylinder position="1 .9 -3" rotation="-30 20 0" radius="0.3" height="0.5" color="#0818A8"></a-cylinder> <a-cylinder position="0 0.5 -2.6" rotation="-3 20 45" radius="0.3" height="0.5" color="#0047AB"></a-cylinder> <a-cylinder position="0 3 -4" rotation="60 90 15" radius="0.3" height="0.5" color="#00008B"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#0096FF"></a-plane> <a-videosphere src="#clouds"></a-videosphere> <a-entity gltf-model="#lizard" position="1 0 -2.4" rotation="0 -30 0" animation-mixer="loop:repeat"></a-entity> </a-scene> </body> </html>
0 Comments
Leave a Reply. |
Archives
May 2022
Categories
All
|