Sync rotation/position with Object3D

One can now edit the position and rotation of the object3D directly and
getAttribute and setAttribute will return consistent values.

Author: dmarcos

src/components/camera.js

@@ -158,7 +158,7 @@ module.exports.Component = registerComponent('camera', {
     if (this.savedPose || !hasPositionalTracking) { return; }
 
     this.savedPose = {
-      position: el.getAttribute('position'),
+      position: el.getAttribute('position').clone(),
       rotation: el.getAttribute('rotation')
     };
   },

src/core/a-entity.js

@@ -43,6 +43,7 @@ var proto = Object.create(ANode.prototype, {
       this.object3D.el = this;
       this.object3DMap = {};
       this.parentEl = null;
+      this.rotationObj = {};
       this.states = [];
     }
   },
@@ -720,7 +721,11 @@ var proto = Object.create(ANode.prototype, {
   getAttribute: {
     value: function (attr) {
       // If component, return component data.
-      var component = this.components[attr];
+      var component;
+      if (attr === 'position') { return this.object3D.position; }
+      if (attr === 'rotation') { return getRotation(this); }
+      if (attr === 'scale') { return this.object3D.scale; }
+      component = this.components[attr];
       if (component) { return component.data; }
       return window.HTMLElement.prototype.getAttribute.call(this, attr);
     },
@@ -851,5 +856,15 @@ function isComponent (componentName) {
   return true;
 }
 
+function getRotation (entityEl) {
+  var radToDeg = THREE.Math.radToDeg;
+  var rotation = entityEl.object3D.rotation;
+  var rotationObj = entityEl.rotationObj;
+  rotationObj.x = radToDeg(rotation.x);
+  rotationObj.y = radToDeg(rotation.y);
+  rotationObj.z = radToDeg(rotation.z);
+  return rotationObj;
+}
+
 AEntity = registerElement('a-entity', {prototype: proto});
 module.exports = AEntity;

tests/core/a-entity.test.js

@@ -347,10 +347,10 @@ suite('a-entity', function () {
     test('can update component data', function () {
       var el = this.el;
       el.setAttribute('position', '10 20 30');
-      assert.deepEqual(el.getAttribute('position'), {x: 10, y: 20, z: 30});
+      assert.shallowDeepEqual(el.getAttribute('position'), {x: 10, y: 20, z: 30});
 
       el.setAttribute('position', {x: 30, y: 20, z: 10});
-      assert.deepEqual(el.getAttribute('position'), {x: 30, y: 20, z: 10});
+      assert.shallowDeepEqual(el.getAttribute('position'), {x: 30, y: 20, z: 10});
     });
 
     test('can partially update multiple properties of a component', function () {
@@ -392,7 +392,7 @@ suite('a-entity', function () {
     test('can partially update vec3', function () {
       var el = this.el;
       el.setAttribute('position', {y: 20});
-      assert.deepEqual(el.getAttribute('position'), {x: 0, y: 20, z: 0});
+      assert.shallowDeepEqual(el.getAttribute('position'), {x: 0, y: 20, z: 0});
     });
 
     test('can update component property with asymmetrical property type', function () {
@@ -1312,12 +1312,12 @@ suite('a-entity', function () {
       var el = this.el;
       mixinFactory('material', {material: 'shader: flat'});
       mixinFactory('position', {position: '1 2 3'});
-      mixinFactory('rotation', {rotation: '10 20 30'});
+      mixinFactory('rotation', {rotation: '10 20 45'});
       el.setAttribute('mixin', '  material\t\nposition \t  rotation\n  ');
       el.setAttribute('material', 'color: red');
       assert.shallowDeepEqual(el.getAttribute('material'), {shader: 'flat', color: 'red'});
       assert.shallowDeepEqual(el.getAttribute('position'), {x: 1, y: 2, z: 3});
-      assert.shallowDeepEqual(el.getAttribute('rotation'), {x: 10, y: 20, z: 30});
+      assert.shallowDeepEqual(el.getAttribute('rotation'), {x: 10, y: 20, z: 45});
       assert.equal(el.mixinEls.length, 3);
     });
 
@@ -1336,6 +1336,31 @@ suite('a-entity', function () {
       assert.equal(el.mixinEls.length, 0);
     });
   });
+
+  suite('getRotation', function () {
+    test('returns rotation previously set with setAttribute', function () {
+      var el = this.el;
+      el.setAttribute('rotation', {x: 10, y: 45, z: 50});
+      assert.shallowDeepEqual(el.getAttribute('rotation'), {x: 10, y: 45, z: 50});
+    });
+
+    test('returns rotation previously set by modifying the object3D rotation', function () {
+      var el = this.el;
+      el.object3D.rotation.set(Math.PI, Math.PI / 2, Math.PI / 4);
+      assert.shallowDeepEqual(el.getAttribute('rotation'), {x: 180, y: 90, z: 45});
+    });
+
+    test('returns rotation previously set by modifying the object3D quaternion', function () {
+      var el = this.el;
+      var quaternion = new THREE.Quaternion();
+      var euler = new THREE.Euler();
+      euler.order = 'YXZ';
+      euler.set(Math.PI / 2, Math.PI, 0);
+      quaternion.setFromEuler(euler);
+      el.object3D.quaternion.copy(quaternion);
+      assert.shallowDeepEqual(el.getAttribute('rotation'), {x: 90, y: 180, z: 0});
+    });
+  });
 });
 
 suite('a-entity component lifecycle management', function () {

tests/core/controls.test.js

@@ -22,7 +22,7 @@ suite('position controls on camera with WASD controls (integration unit test)',
     var keydownEvent;
     var position;
 
-    position = el.getAttribute('position');
+    position = el.getAttribute('position').clone();
     keydownEvent = new Event('keydown');
     keydownEvent.code = 'KeyW';
     window.dispatchEvent(keydownEvent);
@@ -44,7 +44,7 @@ suite('position controls on camera with WASD controls (integration unit test)',
     var keydownEvent;
     var position;
 
-    position = el.getAttribute('position');
+    position = el.getAttribute('position').clone();
     keydownEvent = new Event('keydown');
     keydownEvent.code = 'KeyA';
     window.dispatchEvent(keydownEvent);
@@ -66,7 +66,7 @@ suite('position controls on camera with WASD controls (integration unit test)',
     var keydownEvent;
     var position;
 
-    position = el.getAttribute('position');
+    position = el.getAttribute('position').clone();
     keydownEvent = new Event('keydown');
     keydownEvent.code = 'KeyS';
     window.dispatchEvent(keydownEvent);
@@ -88,7 +88,7 @@ suite('position controls on camera with WASD controls (integration unit test)',
     var keydownEvent;
     var position;
 
-    position = el.getAttribute('position');
+    position = el.getAttribute('position').clone();
     keydownEvent = new Event('keydown');
     keydownEvent.code = 'KeyD';
     window.dispatchEvent(keydownEvent);
@@ -111,7 +111,7 @@ suite('position controls on camera with WASD controls (integration unit test)',
     var position;
 
     el.setAttribute('rotation', '0 90 0');
-    position = el.getAttribute('position');
+    position = el.getAttribute('position').clone();
     keydownEvent = new Event('keydown');
     keydownEvent.code = 'KeyW';
     window.dispatchEvent(keydownEvent);

tests/extras/primitives/primitives/a-torus.test.js

@@ -14,7 +14,7 @@ suite('a-torus', function () {
   });
 
   test('has default position when created', function () {
-    assert.deepEqual(this.torusEl.getAttribute('position'), {x: 0, y: 0, z: 0});
+    assert.shallowDeepEqual(this.torusEl.getAttribute('position'), {x: 0, y: 0, z: 0});
   });
 
   test('sets geometry.primitive', function () {