Merge pull request #1339 from ngokevin/pivot

geometry.translate -> pivot component in extras/ (fixes #1341)
aframevr · Apr 12, 2016 · be807ca · be807ca
2 parents e799790 + 8ab9100
commit be807ca
Show file tree

Hide file tree

Showing 17 changed files with 382 additions and 227 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+## 0.3.0
+
+0.3.0 improves performance and interactivity.
+
+### Major Changes
+
+- Geometries default to be [BufferGeometry](http://threejs.org/docs/#Reference/Core/BufferGeometry)s, saving memory at the cost of being more difficult to manually manipulate. Use `geometry="buffer: false"` to disable. (#633)
+
+### Enhancements
+
+- `AFRAME.registerGeometry` API such that each geometry type has its own distinct schema. (#1162)
+
+## Fixes
+
+- Fixed primitives not correctly merging properties with defined components. (#1324)
+
 ## 0.2.0
 
 0.2.0 improves extensibility:

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"
-                 translate="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"
-                 translate="0 7 0"></a-box>
+                 position="0 7 0"></a-box>
         </a-entity>
 
         <!-- Clouds -->
@@ -93,11 +93,13 @@
         </a-entity>
 
         <!-- Shadow -->
-        <a-plane width="12.5" height="20" position="0 .01 10" translate="0 10 0"
-                 color="#21897C" rotation="-90 0 0">
-          <a-animation attribute="scale" from="1 0 1" to="1 1 1" easing="ease-out" begin="600"
-                       dur="1000" fill="backwards"></a-animation>
-        </a-plane>
+        <a-entity rotation="-90 0 0">
+          <a-plane width="12.5" height="20" position="0 0 0.1" pivot="0 -10 0"
+                   color="#21897C">
+            <a-animation attribute="scale" from="1 0 1" to="1 1 1" easing="ease-out"
+                         begin="600" dur="1000" fill="both"></a-animation>
+          </a-plane>
+        </a-entity>
 
         <!-- Base -->
         <a-entity>

diff --git a/examples/animation-generic-logo/index.html b/examples/animation-generic-logo/index.html
@@ -41,20 +41,20 @@
 
         <a-entity id="dots1" rotation="0 0 45">
           <a-animation attribute="scale" from="1 0 1" to="1 0.6 1" begin="800" dur="750" fill="both" easing="ease-out"></a-animation>
-          <a-cylinder position="0 2 0" radius="0.04" height="2" translate="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-cylinder position="0 -2 0" radius="0.04" height="2" translate="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>
 
         <a-entity id="dots1" rotation="0 0 -45">
           <a-animation attribute="scale" from="1 0 1" to="1 0.6 1" begin="800" dur="750" fill="both" easing="ease-out"></a-animation>
-          <a-cylinder position="0 2 0" radius="0.04" height="2" translate="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-cylinder position="0 -2 0" radius="0.04" height="2" translate="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-pivots/index.html b/examples/animation-pivots/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Animations: Pivots</title>
+    <meta name="description" content="Animations: Pivots - A-Frame">
+    <script src="../../dist/aframe.js"></script>
+  </head>
+  <body>
+    <a-scene>
+      <a-assets>
+        <a-mixin id="cylinder"
+                 geometry="primitive: cylinder; height: 2; openEnded: true; radius: 2"
+                 material="side: double">
+        <a-mixin id="scale" attribute="scale" from="1 1.125 1" to="1 0 1"
+                 dur="2000"></a-mixin>
+      </a-assets>
+
+      <a-entity position="0 0 8">
+        <a-camera></a-camera>
+      </a-entity>
+
+      <!-- 1 -->
+      <!-- Animate cylinder scales on the Y-axis. -->
+      <a-entity position="-5 0 0">
+        <a-cylinder mixin="cylinder" position="0 2 0" color="#4CC3D9">
+          <a-animation mixin="scale"></a-animation>
+        </a-cylinder>
+
+        <a-cylinder mixin="cylinder" position="0 -2 0" color="#7BC8A4">
+          <a-animation mixin="scale"></a-animation>
+        </a-cylinder>
+
+      </a-entity>
+
+      <!-- 2 -->
+      <!-- Animate cylinder scales on the Y-axis. -->
+      <!-- Move cylinder pivots to top and bottom edges using pivot and position. -->
+      <a-entity>
+        <a-cylinder mixin="cylinder" position="0 1 0" pivot="0 1 0" color="#4CC3D9">
+          <a-animation mixin="scale"></a-animation>
+        </a-cylinder>
+
+        <a-cylinder mixin="cylinder" position="0 -1 0" pivot="0 -1 0" color="#7BC8A4">
+          <a-animation mixin="scale"></a-animation>
+        </a-cylinder>
+      </a-entity>
+
+      <!-- 3 -->
+      <!-- Animate the cylinder scales on the Y-axis -->
+      <!-- Move cylinder pivots to top and bottom edges using pivot and position. -->
+      <!-- Animate the parent entity scale on the Y-axis. -->
+      <a-entity position="5 0 0">
+        <a-animation mixin="scale" from="1 0 1" to="1 1 1"></a-animation>
+
+        <a-cylinder mixin="cylinder" position="0 2 0" pivot="0 -1 0" color="#4CC3D9">
+          <a-animation mixin="scale"></a-animation>
+        </a-cylinder>
+
+        <a-cylinder mixin="cylinder" position="0 -2 0" pivot="0 1 0" color="#7BC8A4">
+          <a-animation mixin="scale"></a-animation>
+        </a-cylinder>
+      </a-entity>
+
+      <a-sky src="../_skies/gray-gradient-1.jpg"></a-sky>
+      <a-light type="directional" color="#FFF" intensity="0.2" position="-1 2 1"></a-light>
+      <a-light type="ambient" color="#FFF"></a-light>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/animation-plane-reveals/index.html b/examples/animation-plane-reveals/index.html
@@ -8,34 +8,38 @@
   </head>
   <body>
     <a-scene>
-
-      <!-- A series of planes that use translate, 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" translate="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-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 -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" translate="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" translate="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" translate="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>
 
       <a-sky src="../_skies/gray-gradient-1.jpg"></a-sky>
       <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
       <a-light type="ambient" color="#fff"></a-light>
-
     </a-scene>
   </body>
 </html>
diff --git a/examples/animation-translates/index.html b/examples/animation-translates/index.html
diff --git a/examples/animation-unfold/index.html b/examples/animation-unfold/index.html
@@ -8,34 +8,42 @@
   </head>
   <body>
     <a-scene>
-      <!-- A series of nested boards that unfold one by one -->
+      <a-assets>
+        <a-mixin id="board" geometry="depth: .05; height: 1; width: 6" material="shader: flat"
+                 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>
+
+      <!-- Series of nested boards that unfold one by one. -->
       <a-entity position="0 0 -4" scale="1 1 1">
+        <!-- Animate rotation and position of group for extra visual flair. -->
+        <a-animation attribute="position" to="0 5 -4" dur="2000"></a-animation>
+        <a-animation attribute="rotation" from="0 60 0" to="0 30 0" dur="2500"></a-animation>
+
+        <!-- Pivot and position are used to set the "hinge" of each board to it's top edge. -->
+        <a-box mixin="board" color="#F16745">
+          <a-animation mixin="unhinge" from="-20 0 0" begin="1000"></a-animation>
 
-        <!-- Animations rotate and position the group for a bit of extra visual flair. -->
-        <a-animation attribute="position" to="0 4.5 -4" dur="2000" fill="forwards"></a-animation>
-        <a-animation attribute="rotation" from="0 60 0" to="0 30 0" dur="2500" fill="forwards"></a-animation>
+          <a-box mixin="board" color="#FFC65D">
+            <a-animation mixin="unhinge" from="-175 0 0" begin="250"></a-animation>
 
-        <!-- Translate and position are used to set the "hinge" of each board to it's top edge.  -->
-        <a-box width="6" height="1" depth=".05" translate="0 -0.5 0" color="#F16745">
-          <a-animation attribute="rotation" from="-90 0 0" to="0 0 0" dur="1000" fill="forwards"></a-animation>
+            <a-box mixin="board" color="#7BC8A4">
+              <a-animation mixin="unhinge" from="-180 0 0" begin="500"></a-animation>
 
-          <a-box position="0 -1 0" width="6" height="1" depth=".05" translate="0 -0.5 0" color="#FFC65D">
-            <a-animation attribute="rotation" from="-175 0 0" to="0 0 0" dur="1000" begin="250" fill="both"></a-animation>
+              <a-box mixin="board" color="#4CC3D9">
+                <a-animation mixin="unhinge" from="-180 0 0" begin="750"></a-animation>
 
-            <a-box position="0 -1 0" width="6" height="1" depth=".05" translate="0 -0.5 0" color="#7BC8A4">
-              <a-animation attribute="rotation" from="-180 0 0" to="0 0 0" dur="1000" begin="500" fill="both"></a-animation>
-              <a-box position="0 -1 0" width="6" height="1" depth=".05" translate="0 -0.5 0" color="#4CC3D9">
-                <a-animation attribute="rotation" from="-180 0 0" to="0 0 0" dur="1000" begin="750" fill="both"></a-animation>
-                <a-box position="0 -1 0" width="6" height="1" depth=".05" translate="0 -0.5 0" color="#93648D">
-                  <a-animation attribute="rotation" from="-180 0 0" to="0 0 0" dur="1000" begin="1000" fill="both"></a-animation>
+                <a-box mixin="board" color="#93648D">
+                  <a-animation mixin="unhinge" from="-180 0 0" begin="1000"></a-animation>
                 </a-box>
               </a-box>
             </a-box>
           </a-box>
         </a-box>
       </a-entity>
 
-      <a-image position="0 -1 0" src="../_images/radial-shadow-2.png" rotation="-90 0 0" scale="6 6 6"></a-image>
+      <a-image position="0 -1 0" src="../_images/radial-shadow-2.png" rotation="-90 0 0"
+               scale="6 6 6"></a-image>
       <a-sky color="#ECECEC"></a-sky>
       <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
       <a-light type="ambient" color="#fff"></a-light>