Solution, Final
Final Solution
Script in the <head> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script src="js/aframe.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function(event) { document.querySelector('#start_icon').addEventListener('click', function () { console.log('clicked'); document.querySelector('#camera').emit('cmd_Start1'); }); document.querySelector('#ani1').addEventListener('animationend', function () { document.querySelector('#camera').emit('cmd_Start2'); }); document.querySelector('#ani2').addEventListener('animationend', function () { document.querySelector('#camera').emit('cmd_Start3'); }); document.querySelector('#ani3').addEventListener('animationend', function () { document.querySelector('#camera').emit('cmd_Start4'); }); }); </script> |
Animation in the <body> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<a-scene> <!-- To position the camera, set the position on a wrapper <a-entity> --> <a-entity id="camera" position ="0 1 5"> <a-camera zoom="0.5" user-height="0"> <a-cursor></a-cursor> </a-camera> <!-- 1st Animation --> <a-animation id="ani1" easing="linear" begin="cmd_Start1" dur="5000" attribute="position" to="5 1 0"></a-animation> <!-- 2nd Animation --> <a-animation id="ani2" easing="linear" begin="cmd_Start2" dur="5000" attribute="position" from="5 1 0" to="0 1 -5"></a-animation> <a-animation easing="linear" begin="cmd_Start2" dur="5000" attribute="rotation" from="0 90 0" to="0 180 0"></a-animation> <!-- 3rd Animation --> <a-animation id="ani3" easing="linear" begin="cmd_Start3" dur="5000" attribute="position" from="0 1 -5" to="-5 1 0"></a-animation> <a-animation easing="linear" begin="cmd_Start3" dur="5000" attribute="rotation" from="0 180 0" to="0 270 0"></a-animation> <!-- 4th Animation --> <a-animation id="ani4" easing="linear" begin="cmd_Start4" dur="5000" attribute="position" from="-5 1 0" to="0 1 5"></a-animation> <a-animation easing="linear" begin="cmd_Start4" dur="5000" attribute="rotation" from="0 270 0" to="0 360 0"></a-animation> </a-entity> ... |
Complete Solution
Please download the complete solution.