Solution, Part 1
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:
|
1 |
<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:
|
1 2 3 4 5 6 7 8 9 |
<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:
|
1 2 3 4 5 |
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:
|
1 2 3 4 5 6 |
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.