Solution, Part 1

Solution, Part 1

Topic Progress:

First part of the Solution

First we place a box within the <a-scene>. The box has the id start_icon. When clicking on it, the animation should start:

<a-box id="start_icon" src="images/video_icon.png" position="0 -0.5 2" width=".5" height=".5" depth=".05" color="#FFF"></a-box>

Now we need a <script> Tag in the <head> of the HTML and have to wait until the DOM (Document Object Model) has loaded:

<head>
...
<script src="js/aframe.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
   // Commands, when document is loaded
});
</script>
</head>

When the animation has loaded we have to wait until the user clicks on the box with the id start_icon:

document.addEventListener('DOMContentLoaded', function(event) {
   document.querySelector('#start_icon').addEventListener('click', function () {
      // Commands, when user clicks on box with id start_icon
   });
});

When the user has clicked we send (emit) a message to the parent element (<a-camera> with the id camera) of the animation:

document.addEventListener('DOMContentLoaded', function(event) {
   document.querySelector('#start_icon').addEventListener('click', function () {
      console.log('User clicked');
      document.querySelector('#camera').emit('cmd_Start1');
   });
});

It is our decision how to call the message. In the example it is called cmd_start1.

In the next step we need to define the animation which begins when the message cmd_start1 is received.

 

 

 

 

 

 

 

 

Comments are closed.