From 8ab91001d3d963f354417eb37f5e9ff3f080b016 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Mon, 4 Apr 2016 15:17:42 -0700 Subject: [PATCH] geometry.translate -> pivot component in extras/ --- CHANGELOG.md | 16 ++ examples/animation-aframe-logo/index.html | 16 +- examples/animation-generic-logo/index.html | 8 +- examples/animation-pivots/index.html | 70 +++++++ examples/animation-plane-reveals/index.html | 36 ++-- examples/animation-translates/index.html | 66 ------- examples/animation-unfold/index.html | 40 ++-- examples/animation-warps/index.html | 40 ++-- examples/index.html | 4 +- examples/showcase-anime-UI/index.html | 28 +-- examples/showcase-spheres-and-fog/index.html | 172 +++++++++++------- .../index.html | 23 ++- src/extras/components/index.js | 1 + src/extras/components/pivot.js | 47 +++++ src/extras/primitives/getMeshMixin.js | 1 - src/index.js | 1 + tests/extras/components/pivot.test.js | 40 ++++ 17 files changed, 382 insertions(+), 227 deletions(-) create mode 100644 examples/animation-pivots/index.html delete mode 100644 examples/animation-translates/index.html rename examples/{test-geometry-translation => test-pivot}/index.html (64%) create mode 100644 src/extras/components/index.js create mode 100644 src/extras/components/pivot.js create mode 100644 tests/extras/components/pivot.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ea720e29f3..a5a3bace988 100644 --- 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 index 6783f157cb1..ee65f98a2fb 100644 --- a/examples/animation-aframe-logo/index.html +++ b/examples/animation-aframe-logo/index.html @@ -45,9 +45,9 @@ + position="0 7 .52" shader="flat"> + position="0 7 0"> @@ -93,11 +93,13 @@ - - - + + + + + diff --git a/examples/animation-generic-logo/index.html b/examples/animation-generic-logo/index.html index 834d69ecaae..47de300c695 100644 --- a/examples/animation-generic-logo/index.html +++ b/examples/animation-generic-logo/index.html @@ -41,20 +41,20 @@ - + - + - + - + diff --git a/examples/animation-pivots/index.html b/examples/animation-pivots/index.html new file mode 100644 index 00000000000..86109ccda82 --- /dev/null +++ b/examples/animation-pivots/index.html @@ -0,0 +1,70 @@ + + + + + Animations: Pivots + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/animation-plane-reveals/index.html b/examples/animation-plane-reveals/index.html index 3d01a418e87..4fae2cb2fd1 100644 --- a/examples/animation-plane-reveals/index.html +++ b/examples/animation-plane-reveals/index.html @@ -8,34 +8,38 @@ - - - - - - - + + + + + + + + - - + + - - - + + + - - + + - - diff --git a/examples/animation-translates/index.html b/examples/animation-translates/index.html deleted file mode 100644 index a14982e17d7..00000000000 --- a/examples/animation-translates/index.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - Animations: Translates - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/animation-unfold/index.html b/examples/animation-unfold/index.html index ff6b003fa89..414b7f896f4 100644 --- a/examples/animation-unfold/index.html +++ b/examples/animation-unfold/index.html @@ -8,26 +8,33 @@ - + + + + + + + + + + + + + - - - + + - - - + + - - + + - - - - - - + + @@ -35,7 +42,8 @@ - + diff --git a/examples/animation-warps/index.html b/examples/animation-warps/index.html index 5c9826fa00e..80316c34671 100644 --- a/examples/animation-warps/index.html +++ b/examples/animation-warps/index.html @@ -18,11 +18,11 @@ - + - + @@ -30,11 +30,11 @@ - + - + @@ -42,11 +42,11 @@ - + - + @@ -54,11 +54,11 @@ - + - + @@ -66,11 +66,11 @@ - + - + @@ -87,11 +87,11 @@ - + - + @@ -99,11 +99,11 @@ - + - + @@ -111,11 +111,11 @@ - + - + @@ -123,11 +123,11 @@ - + - + @@ -135,11 +135,11 @@ - + - + diff --git a/examples/index.html b/examples/index.html index 7f394b244c1..e5569e34264 100644 --- a/examples/index.html +++ b/examples/index.html @@ -130,7 +130,7 @@

Animations

  • Arms
  • Plane Reveals
  • Generic Logo
    • -
  • Translates
    • +
  • Pivots
  • Unfold
  • Warps
    • @@ -146,7 +146,6 @@

    Tests

  • Fog
  • Geometries
  • Geometry Gallery
    • -
  • Geometry Translation
  • Lights
  • Look-At
  • Mixin
    • @@ -154,6 +153,7 @@

    Tests

  • Opacity
  • Pano Explorer
  • Physically-Based Materials
    • +
  • Pivot
  • Shaders
  • Texture
  • Towers
    • diff --git a/examples/showcase-anime-UI/index.html b/examples/showcase-anime-UI/index.html index 8b71743df93..70d97155baa 100644 --- a/examples/showcase-anime-UI/index.html +++ b/examples/showcase-anime-UI/index.html @@ -43,98 +43,98 @@ - +     - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/examples/showcase-spheres-and-fog/index.html b/examples/showcase-spheres-and-fog/index.html index 97aa4c9be9d..0afd1892822 100644 --- a/examples/showcase-spheres-and-fog/index.html +++ b/examples/showcase-spheres-and-fog/index.html @@ -3,118 +3,152 @@ Spheres & Fog - + - - - + + - - - + + + + - - - + + + + - - - + + + + - - - - - - - - + + + + - - - + + + + - - - - + + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - + - diff --git a/examples/test-geometry-translation/index.html b/examples/test-pivot/index.html similarity index 64% rename from examples/test-geometry-translation/index.html rename to examples/test-pivot/index.html index 3422bd2039a..e17a4187241 100644 --- a/examples/test-geometry-translation/index.html +++ b/examples/test-pivot/index.html @@ -2,19 +2,19 @@ - Geometry Translation - + Pivot Component + - + - - + + + @@ -27,10 +27,9 @@ material="color: #335; shader: flat" scale="1 1 -1"> - + - + diff --git a/src/extras/components/index.js b/src/extras/components/index.js new file mode 100644 index 00000000000..340e09f207f --- /dev/null +++ b/src/extras/components/index.js @@ -0,0 +1 @@ +require('./pivot'); diff --git a/src/extras/components/pivot.js b/src/extras/components/pivot.js new file mode 100644 index 00000000000..caf7d8e8aa8 --- /dev/null +++ b/src/extras/components/pivot.js @@ -0,0 +1,47 @@ +var registerComponent = require('../../core/component').registerComponent; +var THREE = require('../../lib/three'); + +var originalPosition = new THREE.Vector3(); +var originalRotation = new THREE.Vector3(); + +/** + * Wrap el.object3D within an outer group. Apply pivot to el.object3D as position. + */ +registerComponent('pivot', { + dependencies: ['position'], + + schema: {type: 'vec3'}, + + init: function () { + var data = this.data; + var el = this.el; + var originalParent = el.object3D.parent; + var originalGroup = el.object3D; + var outerGroup = new THREE.Group(); + + originalPosition.copy(originalGroup.position); + originalRotation.copy(originalGroup.rotation); + + // Detach current group from parent. + originalParent.remove(originalGroup); + outerGroup.add(originalGroup); + + // Set new group as the outer group. + originalParent.add(outerGroup); + + // Set outer group as new object3D. + el.object3D = outerGroup; + + // Apply pivot to original group. + originalGroup.position.set(-1 * data.x, -1 * data.y, -1 * data.z); + + // Offset the pivot so that world position not affected. + // And restore position onto outer group. + outerGroup.position.set(data.x + originalPosition.x, data.y + originalPosition.y, + data.z + originalPosition.z); + + // Transfer rotation to outer group. + outerGroup.rotation.copy(originalGroup.rotation); + originalGroup.rotation.set(0, 0, 0); + } +}); diff --git a/src/extras/primitives/getMeshMixin.js b/src/extras/primitives/getMeshMixin.js index 48f3ab87798..d2d281110ef 100644 --- a/src/extras/primitives/getMeshMixin.js +++ b/src/extras/primitives/getMeshMixin.js @@ -16,7 +16,6 @@ module.exports = function getMeshMixin () { shader: 'material.shader', side: 'material.side', src: 'material.src', - translate: 'geometry.translate', transparent: 'material.transparent' }, diff --git a/src/index.js b/src/index.js index cb2c9bcfd36..8c1a914223a 100644 --- a/src/index.js +++ b/src/index.js @@ -44,6 +44,7 @@ require('./core/a-cubemap'); require('./core/a-mixin'); // Extras. +require('./extras/components/'); require('./extras/declarative-events/'); require('./extras/primitives/'); diff --git a/tests/extras/components/pivot.test.js b/tests/extras/components/pivot.test.js new file mode 100644 index 00000000000..234e1ec4029 --- /dev/null +++ b/tests/extras/components/pivot.test.js @@ -0,0 +1,40 @@ +/* global assert, process, setup, suite, test */ +var helpers = require('../../helpers'); +var THREE = require('lib/three'); + +var positionVec3 = new THREE.Vector3(); + +suite('pivot', function () { + setup(function (done) { + var el = this.el = helpers.entityFactory(); + el.setAttribute('geometry', {primitive: 'box'}); + el.addEventListener('loaded', function () { + done(); + }); + }); + + test('does not translate object', function () { + var el = this.el; + el.setAttribute('pivot', '0 0.5 0'); + // Grab world coordinates. + el.sceneEl.object3D.updateMatrixWorld(); + positionVec3.setFromMatrixPosition(el.getObject3D('mesh').matrixWorld); + assert.shallowDeepEqual(positionVec3, {x: 0, y: 0, z: 0}); + }); + + test('sets proper pivot point', function () { + var el = this.el; + + // Rotate without pivot, center will stay in place. + el.setAttribute('rotation', '180 0 0'); + el.sceneEl.object3D.updateMatrixWorld(); + positionVec3.setFromMatrixPosition(el.getObject3D('mesh').matrixWorld); + assert.shallowDeepEqual(positionVec3.floor(), {x: 0, y: 0, z: 0}); + + // Set pivot, check that world position is changed. + el.setAttribute('pivot', '0 0.5 0'); + el.sceneEl.object3D.updateMatrixWorld(); + positionVec3.setFromMatrixPosition(el.getObject3D('mesh').matrixWorld); + assert.shallowDeepEqual(positionVec3.floor(), {x: 0, y: 1, z: -1}); + }); +});