Store the object(s) you want to manipulate as variable(s)

Store the object(s) you want to manipulate as variable(s)

Topic Progress:

Store the object(s) you want to manipulate as variable(s)

In our case we want to manipulate a square when looking at it for a longer time or click it with the mouse. First, we have to make sure that we added a camera to our scene:

<a-scene>
   <a-entity position="0 0 5">
      <a-camera zoom="0.5" user-height="1.0">
         <a-cursor></a-cursor>
      </a-camera>
   </a-entity>
   ...

Then we have to give the object we would like to manipulate an id:

<a-entity
   id="box1"
   position="0 0 0"
   geometry="primitive:box;"
   material="color:#FF0000;">
</a-entity>

We now can access the id and read with the console.log commands all properties. The console.log command we use only to make sure we have no typing errors:

<script>
   document.addEventListener("DOMContentLoaded", function(event) {
      var box1 = document.querySelector('#box1');
      console.log("Geometry: " + box1.getAttribute('geometry').primitive);
      var heightBox1 = box1.getAttribute('geometry').height;
      console.log("Height Box1: " + heightBox1);
   });
</script>

Now we are ready to add the Event Listeners!

Comments are closed.