• Corrina Crazie Espinosa

A-frame, Glitch & VR Pop Quiz

Updated: Mar 29

Code guidebook:

https://aframe.io/docs/1.3.0/introduction/



Code example:




<!DOCTYPE html>

<html>

<head>

<script src="https://aframe.io/releases/1.2.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>


<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v5.0.0/dist/aframe-extras.min.js"></script>

<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>



</head>

<body>

<a-scene>

<a-assets>

<a-asset-item id="cuppy" src="https://cdn.glitch.global/83831f2c-707d-40e8-abac-cddec95eb250/Mar3animatedF.gltf?v=1646775581848></a-asset-item">

</a-assets>

<a-entity

gltf-model="#cuppy"

position="0

5 -20"

animation-mixer = "loop : true"

scale="0.7 0.7 0.7"

rotation = "0 270 0"

></a-entity>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

<a-sky color="#ECECEC"></a-sky>

</a-scene>

</body>

</html>


Here is a video to help you to create a better environment pretty quickly and easily:


For this to work you will need to put this part snippet into your code:


<head> <-- you already have this, put the following code right after this.


<script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>

</head>


here is some more very helpful

https://aframe-course.glitch.me/0500-environments.html


Next past this code, inside of <


<a-entity environment></a-entity>

replace the word environment (underlined here) with the code you copy from the inspector.


To make an asset make a sound, add the sound to your assets folder.

Copy the link: Use this code, and put in your link:
 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

<a-entity

gltf-model="#unicowrn"

position="0 -2 -40"

animation-mixer="loop : "

scale=".5 .5 .5"

rotation="0 -90 0"

sound="src: https://cdn.glitch.me/566518fb-10be-4b4a-9e2a-bfd0cbad5ceb%2Fcowsound.mp3?v=1636861172687(cowsound.mp3); autoplay: true loop: true"

></a-entity>





85 views