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>

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>
   ...

<a-scene>

<a-entity id="camera" position ="0 1 5">

<a-camera zoom="0.5" user-height="0">

<a-cursor></a-cursor>

</a-camera>

<a-animation id="ani1" easing="linear" begin="cmd_Start1" dur="5000" attribute="position" to="5 1 0"></a-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>

<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>

<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.

← Previous Topic Next Topic →

P5.js; A-Frame.js

Tutorials

Solution, Final

Final Solution

Complete Solution