<html>

<head>
  <title> Animating Shapes with components</title>

  <!--  --------- IMPORTED LIBRARIES  ------>


  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
   <script src="https://unpkg.com/aframe-curve-component/dist/aframe-curve-component.min.js"></script>
    <script src="https://unpkg.com/aframe-alongpath-component/dist/aframe-alongpath-component.min.js"></script>
    <!-- Curve and walk along path components -->  
    
   <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.6/dist/aframe-extras.min.js"></script>
    <!-- Extras component  by Don Mccurdy (used for tube along path)-->  
   

</head>

<body>

  <a-scene>
    <!-- Creating scene -->


    <!--  --------- SKY  --------- -->

    <a-sky id="background-img" color="#EBEBEB"></a-sky>


    
 <!--  ---------  STRANGE CURVE  --------- -->  

      <a-curve id="track1" closed="true"  type="QuadraticBezier" >
        
        <!--In here you create each one of the points that make up the cruve 
By using closed=true you determine that the first and last point will join-->
        
        <a-curve-point position="0 1 -2" ></a-curve-point>
        <a-curve-point position="-1 2 -2" ></a-curve-point>
        <a-curve-point position="-2 1 -2" ></a-curve-point>
        <a-curve-point position="-1 0 -2"></a-curve-point>
        <a-curve-point position="0 1 -2" ></a-curve-point>
    </a-curve>
          <a-draw-curve curveref="#track1" material="color: blue; opacity:0.3"></a-draw-curve>
     <!-- After chooding the points, here you draw the junction of all those points 

If you set the material opacity to 0 you don't see the curve -->
      
 <!--  ---------  RANDOM CURVE  --------- -->  

      <a-curve id="Random" closed="false"  type="QuadraticBezier"  >
        <a-curve-point position="1.75 0 -2" ></a-curve-point>
        <a-curve-point position="-1.35 1.47 -2" ></a-curve-point>
        <a-curve-point position="-2 0 -2" ></a-curve-point>
        <a-curve-point position="-1.35 -1.47 -2" ></a-curve-point>
        <a-curve-point position="0 0 -2" ></a-curve-point>
        <a-curve-point position="1.75 0 -2"></a-curve-point>
        
    </a-curve>
      
      <a-draw-curve curveref="#Random" material="color: blue; opacity:0.5"></a-draw-curve>
    
 <!--  --------- CREATE TUBE ALONG PATH  AND MAKE IT MOVE ALONG ANOTHER PATH  ------ -->  
      
      <a-tube path="0 0 -2, -0.5 0 -2" radius="0.25" material="color: red" alongpath="curve:#Random; dur: 2000; loop: true; rotate:true;"></a-tube>
    
     <!--This code belongs to another component, the Tube Along Path, which pretty much allows you to create a tube that goes through several points you write down on the path attribute 

Combining that with the Along Path component, I make the tube walk along the path I called Random.

Since the rotate attribute of the alongpath component is true, it won't rotate from the tube center, but the tube will rotate around the path
-->
   
   
 <!--  --------- SPHERES ALONG PATH  --------- -->  
      
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 2000; loop: true"></a-sphere>
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 1950; loop: true"></a-sphere>
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 1900; loop: true"></a-sphere>
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 1850; loop: true"></a-sphere>
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 1800; loop: true"></a-sphere>
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 1750; loop: true"></a-sphere>
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 1700; loop: true"></a-sphere>
      <a-sphere radius="0.05" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" alongpath="curve:#track1; dur: 1650; loop: true"></a-sphere>
      
  <!-- By drawing several spheres and changing the time they take to go through the path, I create a sort of loader effect-->      
  
    
    <!--  --------- CAMERA AND CURSOR  --------- -->


    <a-camera look-controls-enabled wasd-controls-enabled position="0 0 2">


      <a-cursor position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.030; radiusInner: 0.020;" material="color: #11d8c4; shader: flat" fuse="true" timeout="10">
      </a-cursor>

    </a-camera>


  </a-scene>
  <!-- Closing scene -->

</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.