Solution, Final

Solution, Final

Topic Progress:

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.

 

 

 

 

Comments are closed.