update example with new pivot

aframevr · Apr 5, 2016 · 5c1bbc7 · 5c1bbc7
1 parent 9cf80a5
commit 5c1bbc7
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 40 deletions.
diff --git a/examples/animation-aframe-logo/index.html b/examples/animation-aframe-logo/index.html
@@ -45,9 +45,9 @@
           <a-animation attribute="scale" to="1 1 1" begin="800" dur="600"
                        easing="ease-out"></a-animation>
           <a-box width="12.45" depth=".1" height="14" color="#F2E646"
-                 pivot="0 7 .52" shader="flat"></a-box>
+                 position="0 7 .52" shader="flat"></a-box>
           <a-box width="12.5" depth="1" height="14" color="#EF2D5E"
-                 pivot="0 7 0"></a-box>
+                 position="0 7 0"></a-box>
         </a-entity>
 
         <!-- Clouds -->
@@ -93,7 +93,7 @@
         </a-entity>
 
         <!-- Shadow -->
-        <a-plane width="12.5" height="20" position="0 0.1 10" pivot="0 0 -10"
+        <a-plane width="12.5" height="20" position="0 0.1 0" pivot="0 0 10"
                  color="#21897C" rotation="-90 0 0" scale="1 1 0">
           <a-animation attribute="scale" to="1 1 1" easing="ease-out" begin="600"
                        dur="1000" fill="both"></a-animation>

diff --git a/examples/animation-generic-logo/index.html b/examples/animation-generic-logo/index.html
@@ -44,7 +44,7 @@
           <a-cylinder position="0 2 0" radius="0.04" height="2" color="#EF2D5E" open-ended="true" side="double">
             <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="800" dur="750" fill="both" easing="ease-out"></a-animation>
           </a-cylinder>
-          <a-cylinder position="0 -2 0" radius="0.04" height="2" pivot="0 1 0" color="#EF2D5E" open-ended="true" side="double">
+          <a-cylinder position="0 -2 0" radius="0.04" height="2" color="#EF2D5E" open-ended="true" side="double">
             <a-animation attribute="scale" from="1 1.25 1" to="1 0 1" begin="800" dur="750" fill="both" easing="ease-out"></a-animation>
           </a-cylinder>
         </a-entity>

diff --git a/examples/animation-plane-reveals/index.html b/examples/animation-plane-reveals/index.html
@@ -8,23 +8,32 @@
   </head>
   <body>
     <a-scene>
+      <a-assets>
+        <a-mixin id="plane" geometry="height: 1; width: 4" pivot="-2 0.5 0"></a-mixin>
+      </a-assets>
+
       <!-- Series of planes that use pivot, position, and animated scales to reveal themselves. -->
-      <a-entity position="-2 0 -3" rotation="0 35 0">
-        <a-plane width="4" height="1" position="0 6 0" pivot="2 -0.5 0" color="#F16745">
-          <a-animation attribute="scale" from="1 0 1" to="1 1 1" dur="750" begin="500" fill="backwards"></a-animation>
+      <a-entity position="-2 -1 -3" rotation="0 35 0">
+        <a-plane mixin="plane" position="0 6 0" color="#F16745">
+          <a-animation attribute="scale" from="1 0 1" to="1 1 1" dur="750" begin="500"
+                       fill="backwards"></a-animation>
         </a-plane>
 
-        <a-plane width="4" height="1" position="0 4 0" pivot="2 -0.5 0" color="#7BC8A4">
-          <a-animation attribute="scale" from="0 1 1" to="1 1 1" dur="750" begin="500" fill="backwards"></a-animation>
+        <a-plane mixin="plane" position="0 4 0" color="#7BC8A4">
+          <a-animation attribute="scale" from="0 1 1" to="1 1 1" dur="750" begin="500"
+                       fill="backwards"></a-animation>
         </a-plane>
 
-        <a-plane width="4" height="1" position="0 2 0" pivot="2 -0.5 0" color="#4CC3D9">
-          <a-animation attribute="scale" from="0 0 0" to="1 0.05 1" dur="500" begin="500"></a-animation>
-          <a-animation attribute="scale" from="1 0.05 1" to="1 1 1" dur="250" begin="1000" fill="both"></a-animation>
+        <a-plane mixin="plane" position="0 2 0" color="#4CC3D9">
+          <a-animation attribute="scale" from="0 0 0" to="1 0.05 1" dur="500"
+                       begin="500"></a-animation>
+          <a-animation attribute="scale" from="1 0.05 1" to="1 1 1" dur="250" begin="1000"
+                       fill="both"></a-animation>
         </a-plane>
 
-        <a-plane width="4" height="1" position="0 0 0" pivot="2 -0.5 0" color="#EF2D5E">
-          <a-animation attribute="rotation" from="90 0 0" to="0 0 0" dur="750" begin="500" fill="backwards"></a-animation>
+        <a-plane mixin="plane" position="0 0 0" color="#EF2D5E">
+          <a-animation attribute="rotation" from="90 0 0" to="0 0 0" dur="750" begin="500"x
+                        fill="backwards"></a-animation>
         </a-plane>
       </a-entity>
 

diff --git a/examples/animation-unfold/index.html b/examples/animation-unfold/index.html
@@ -10,7 +10,7 @@
     <a-scene>
       <a-assets>
         <a-mixin id="board" geometry="depth: .05; height: 1; width: 6" material="shader: flat"
-                 pivot="0 -0.5 0" position="0 -0.5 0"></a-mixin>
+                 pivot="0 0.5 0" position="0 -1 0"></a-mixin>
         <a-mixin id="unhinge" attribute="rotation" to="0 0 0" dur="1000" fill="both"></a-mixin>
       </a-assets>
 

diff --git a/examples/showcase-spheres-and-fog/index.html b/examples/showcase-spheres-and-fog/index.html
@@ -14,135 +14,135 @@
 
       <!-- Orange -->
       <a-entity position="0 0 -5">
-        <a-sphere pivot="0 4.2 0" radius="4.2" color="#F16745"
+        <a-sphere position="0 4.2 0" radius="4.2" color="#F16745"
                   roughness="0.8" width-segments="52" height-segments="52"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="3 3 3"></a-image>
       </a-entity>
 
       <!-- Green -->
       <a-entity position="-3 0 0">
-        <a-sphere pivot="0 1.75 0" radius="1.75" color="#7BC8A4" roughness="0.2"></a-sphere>
+        <a-sphere position="0 1.75 0" radius="1.75" color="#7BC8A4" roughness="0.2"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="1.75 1.75 1.75"></a-image>
       </a-entity>
 
       <!-- Blue -->
       <a-entity position="1 0 0">
-        <a-sphere pivot="0 1 0" radius="1" color="#4CC3D9" metalness="0.1"></a-sphere>
+        <a-sphere position="0 1 0" radius="1" color="#4CC3D9" metalness="0.1"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="1 1 1"></a-image>
       </a-entity>
 
       <!-- Yellow -->
       <a-entity position="3 0 1">
-        <a-sphere pivot="0 0.5 0" radius="0.5" color="#FFC65D"></a-sphere>
+        <a-sphere position="0 0.5 0" radius="0.5" color="#FFC65D"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="0.5 0.5 0.5"></a-image>
       </a-entity>
 
       <!-- Purple -->
       <a-entity position="20 0 -2">
-        <a-sphere pivot="0 10 0" radius="10" color="#93648D"
+        <a-sphere position="0 10 0" radius="10" color="#93648D"
                   segments-width="52" segments-height="52"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="9 9 9"></a-image>
       </a-entity>
 
       <!-- Yellow -->
       <a-entity position="-24 0 -34">
-        <a-sphere pivot="0 18 0" radius="18" color="#FFC65D"></a-sphere>
+        <a-sphere position="0 18 0" radius="18" color="#FFC65D"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="8 8 8"></a-image>
       </a-entity>
 
       <!-- Green -->
       <a-entity position="25 0 20">
-        <a-sphere pivot="0 12 0" radius="12" color="#7BC8A4"></a-sphere>
+        <a-sphere position="0 12 0" radius="12" color="#7BC8A4"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="8 8 8"></a-image>
       </a-entity>
 
       <!-- White -->
       <a-entity position="-15 0 5">
-        <a-sphere pivot="0 3 0" radius="3" color="#ECECEC"></a-sphere>
+        <a-sphere position="0 3 0" radius="3" color="#ECECEC"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="3 3 3"></a-image>
       </a-entity>
 
       <!-- Orange -->
       <a-entity position="-6 0 6">
-        <a-sphere pivot="0 1 0" radius="1" color="#F16745" roughness="0.8"></a-sphere>
+        <a-sphere position="0 1 0" radius="1" color="#F16745" roughness="0.8"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="1 1 1"></a-image>
       </a-entity>
 
       <!-- Yellow -->
       <a-entity position="-20 0 30">
-        <a-sphere pivot="0 30 0" radius="30" color="#FFC65D" roughness="0.6"></a-sphere>
+        <a-sphere position="0 30 0" radius="30" color="#FFC65D" roughness="0.6"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="15 15 15"></a-image>
       </a-entity>
 
       <!-- Blue -->
       <a-entity position="-1 0 14">
-        <a-sphere pivot="0 2 0" radius="2" color="#4CC3D9"></a-sphere>
+        <a-sphere position="0 2 0" radius="2" color="#4CC3D9"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="2 2 2"></a-image>
       </a-entity>
 
       <!-- Orange -->
       <a-entity position="10 0 15">
-        <a-sphere pivot="0 4 0" radius="4" color="#F16745" roughness="1"></a-sphere>
+        <a-sphere position="0 4 0" radius="4" color="#F16745" roughness="1"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="2 2 2"></a-image>
       </a-entity>
 
       <!-- Blue -->
       <a-entity position="6 0 4">
-        <a-sphere pivot="0 1.5 0" radius="1.5" color="#4CC3D9" metalness="0.1"></a-sphere>
+        <a-sphere position="0 1.5 0" radius="1.5" color="#4CC3D9" metalness="0.1"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="1.5 1.5 1.5"></a-image>
       </a-entity>
 
       <!-- Yellow -->
       <a-entity position="5 0 14">
-        <a-sphere pivot="0 .6 0" radius=".6" color="#FFC65D"></a-sphere>
+        <a-sphere position="0 .6 0" radius=".6" color="#FFC65D"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="0.6 0.6 0.6"></a-image>
       </a-entity>
 
       <!-- Purple -->
       <a-entity position="5 0 25">
-        <a-sphere pivot="0 2 0" radius="2" color="#93648D"></a-sphere>
+        <a-sphere position="0 2 0" radius="2" color="#93648D"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="2 2 2"></a-image>
       </a-entity>
 
       <!-- White -->
       <a-entity position="2 0 15">
-        <a-sphere pivot="0 0.2 0" radius="0.2" color="#ECECEC"></a-sphere>
+        <a-sphere position="0 0.2 0" radius="0.2" color="#ECECEC"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="0.2 0.2 0.2" opacity="0.5"></a-image>
       </a-entity>
 
       <!-- Purple -->
       <a-entity position="4 0 10">
-        <a-sphere pivot="0 0.15 0" radius="0.15" color="#93648D"></a-sphere>
+        <a-sphere position="0 0.15 0" radius="0.15" color="#93648D"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="0.25 0.25 0.25" opacity="0.6"></a-image>
       </a-entity>
 
       <!-- Blue -->
       <a-entity position="4 0 11">
-        <a-sphere pivot="0 0.1 0" radius="0.1" color="#4CC3D9"></a-sphere>
+        <a-sphere position="0 0.1 0" radius="0.1" color="#4CC3D9"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="0.15 0.15 0.15" opacity="0.6"></a-image>
       </a-entity>
 
       <!-- Green -->
       <a-entity position="5 0 11">
-        <a-sphere pivot="0 0.3 0" radius="0.3" color="#7BC8A4"></a-sphere>
+        <a-sphere position="0 0.3 0" radius="0.3" color="#7BC8A4"></a-sphere>
         <a-image src="../_images/radial-shadow-3.png" rotation="-90 0 0"
                  scale="0.25 0.25 0.25" opacity="0.6"></a-image>
       </a-entity>

diff --git a/examples/test-pivot/index.html b/examples/test-pivot/index.html
@@ -9,11 +9,12 @@
   <body>
     <a-scene>
       <a-assets>
+        <a-mixin id="flap" attribute="rotation" direction="alternate"
+                 repeat="indefinite"></a-mixin>
+        <a-mixin id="rotate" attribute="rotation" repeat="indefinite"></a-mixin>
         <a-mixin id="wing" geometry="primitive: box; depth: .005; height: 1; width: 0.5"
-                           material="color: red" rotation="0 0 0"
-                           pivot="-0.25 0 0" scale="1 1.25 1"></a-mixin>
-        <a-mixin id="rotate" attribute="rotation" direction="alternate"
-                           repeat="indefinite"></a-mixin>
+                           material="color: #9D0B28" rotation="0 0 0"
+                           pivot="0.25 0 0" scale="1 1.25 1"></a-mixin>
       </a-assets>
 
       <!-- Camera. -->
@@ -32,12 +33,12 @@
         <a-entity rotation="0 90 0" position="2.5 0 0">
           <a-entity rotation="-45 0 90">
             <a-entity mixin="wing">
-              <a-animation mixin="rotate" to="0 120 0"></a-animation>
+              <a-animation mixin="flap" to="0 120 0"></a-animation>
             </a-entity>
           </a-entity>
           <a-entity rotation="-45 0 90">
             <a-entity mixin="wing">
-              <a-animation mixin="rotate" to="0 -120 0"></a-animation>
+              <a-animation mixin="flap" to="0 -120 0"></a-animation>
             </a-entity>
           </a-entity>
         </a-entity>