Solution, Final
Final Solution
Script in the <head> tag:
<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:
<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.