Simplify code that handles the camera pose in VR. With the removal of VREffect / VRControls the camera pose udpate is entirely managed by THREE. VRManager falls back to a default 1.6m height when the

VRDevice does not have positional tracking or stageParameters data. One can position the camera in 2D mode. When entering VR the value will be stored and restore upon exiting VR mode.

(fix #3315 #3118 #3051 #2487)

Author: dmarcos

docs/components/camera.md

@@ -16,7 +16,7 @@ to move and rotate the camera.
 A camera situated at the average height of human eye level (1.6 meters).
 
 ```html
-<a-entity camera="userHeight: 1.6" look-controls></a-entity>
+  <a-entity position="0 1.6 0" camera look-controls></a-entity>
 ```
 
 ## Properties
@@ -36,22 +36,14 @@ A camera situated at the average height of human eye level (1.6 meters).
 If a camera is not specified, A-Frame will inject a default camera:
 
 ```html
-<a-entity camera="active: true; userHeight: 1.6" look-controls wasd-controls position="0 0 0" data-aframe-default-camera></a-entity>
+<a-entity camera="active: true" look-controls wasd-controls position="0 0 0" data-aframe-default-camera></a-entity>
 ```
 
 If a camera is specified (e.g., our own `<a-camera>` or `<a-entity camera>`),
 then the default camera will not be added.
 
 ## VR Behavior
 
-When not in VR mode, `userHeight` translates the camera up to approximate
-average height of human eye level. The injected camera has this set to 1.6
-(meters). When entering VR, this height offset is *removed* such that we used
-absolute position returned from the VR headset. The offset is convenient for
-experiences that work both in and out of VR, as well as making experiences look
-decent from a desktop screen as opposed to clipping the ground if the headset
-was resting on the ground.
-
 When exiting VR, the camera will restore its rotation to its rotation *before*
 it entered VR. This is so when we exit VR, the rotation of the camera is back
 to normal for a desktop screen.

docs/components/look-controls.md

@@ -26,14 +26,13 @@ component](camera.md).
 
 [pointer-lock-api]: https://developer.mozilla.org/docs/Web/API/Pointer_Lock_API
 
-| Property           | Description                                                      | Default Value |
-|--------------------|------------------------------------------------------------------|---------------|
-| enabled            | Whether look controls are enabled.                               | true          |
-| hmdEnabled         | Whether to use VR headset pose in VR mode.                       | true          |
-| reverseMouseDrag   | Whether to reverse mouse drag.                                   | false         |
-| touchEnabled       | Whether to use touch controls in magic window mode.              | true          |
+| Property         | Description                                                      | Default Value |
+|------------------|------------------------------------------------------------------|---------------|
+| enabled          | Whether look controls are enabled.                               | true          |
+| hmdEnabled       | Whether to use VR headset pose in VR mode.                       | true          |
+| reverseMouseDrag | Whether to reverse mouse drag.                                   | false         |
+| touchEnabled     | Whether to use touch controls in magic window mode.              | true          |
 | pointerLockEnabled | Whether to hide the cursor using the [Pointer Lock API][pointer-lock-api]. | true |
-| userHeight         | Height offset to add to the camera when *not* in VR mode so the camera is not on ground level. The default camera that A-Frame injects or the `<a-camera>` primitive sets this to 1.6 meters. But note the default camera component alone (`<a-entity camera>`) defaults this to 0. | 0 |
 
 ## Customizing look-controls
 
@@ -52,8 +51,7 @@ be left maintaining a wide array of flags.
 
 The component lives within a Browserify/Webpack context so you'll need to
 replace the `require` statements with A-Frame globals (e.g.,
-`AFRAME.registerComponent`, `window.THREE`,
-`AFRAME.constants.DEFAULT_CAMERA_HEIGHT`), and get rid of the `module.exports`.
+`AFRAME.registerComponent`, `window.THREE`), and get rid of the `module.exports`.
 
 ## Caveats
 

docs/primitives/a-camera.md

@@ -9,11 +9,6 @@ source_code: src/extras/primitives/primitives/a-camera.js
 The camera primitive determines what the user sees. We can change the viewport
 by modifying the camera entity's position and rotation.
 
-[userheight]: ../components/camera.md#vr-behavior
-
-Note that by default, the camera origin will be at `0 1.6 0` in desktop mode
-and `0 0 0` in VR mode. Read about the [`camera.userHeight` property][userheight].
-
 ## Example
 
 ```html
@@ -31,7 +26,6 @@ and `0 0 0` in VR mode. Read about the [`camera.userHeight` property][userheight
 | fov                   | camera.fov                     | 80            |
 | look-controls-enabled | look-controls.enabled          | true          |
 | near                  | camera.near                    | 0.5           |
-| user-height           | camera.userHeight              | 1.6           |
 | reverse-mouse-drag    | look-controls.reverseMouseDrag | false         |
 | wasd-controls-enabled | wasd-controls.enabled          | true          |
 

examples/animation/aframe-logo/index.html

@@ -17,8 +17,7 @@
         <a-animation attribute="position" from="0 5 0" to="0 0 0" dur="4000"
                      easing="ease-out"></a-animation>
         <a-entity position="0 880 1290" rotation="-34 0 0">
-          <a-camera id="camera" near="1000" far="4000" fov="2.2" user-height="0"
-                    wasd-controls-enabled="false" look-controls-enabled="false"></a-camera>
+          <a-camera id="camera" near="1000" far="4000" fov="2.2" wasd-controls-enabled="false" look-controls-enabled="false"></a-camera>
         </a-entity>  
       </a-entity>
 

examples/animation/generic-logo/index.html

@@ -14,7 +14,7 @@
       </a-assets>
 
       <a-entity>
-        <a-camera fov="80" near="0.1" wasd-controls-enabled="false" user-height="0"></a-camera>
+        <a-camera fov="80" near="0.1" wasd-controls-enabled="false"></a-camera>
       </a-entity>
 
       <!-- A generic logo made of animated elements -->

examples/animation/pivots/index.html

@@ -18,7 +18,7 @@
       </a-assets>
 
       <a-entity position="0 0 8">
-        <a-camera user-height="0"></a-camera>
+        <a-camera></a-camera>
       </a-entity>
 
       <!-- 1 -->

examples/showcase/anime-UI/index.html

@@ -31,7 +31,7 @@
       </a-assets>
 
       <a-entity position="1.75 0 1.2" rotation="0 28 0">
-        <a-camera near="0.1" user-height="0"></a-camera>
+        <a-camera near="0.1"></a-camera>
       </a-entity>
 
       <a-entity position="0 0 -3">

examples/showcase/link-traversal/js/components/ground.js

@@ -15,7 +15,7 @@ AFRAME.registerComponent('ground', {
           value.geometry.computeFaceNormals();
           value.geometry.computeVertexNormals();
           value.receiveShadow = true;
-          value.material.shading = THREE.FlatShading;
+          value.material.flatShading = THREE.FlatShading;
         }
       });
       self.el.setObject3D('ground', obj);

examples/showcase/tracked-controls/components/grab.js

@@ -12,37 +12,33 @@ AFRAME.registerComponent('grab', {
     this.onHit = this.onHit.bind(this);
     this.onGripOpen = this.onGripOpen.bind(this);
     this.onGripClose = this.onGripClose.bind(this);
+    this.currentPosition = new THREE.Vector3();
   },
 
   play: function () {
     var el = this.el;
     el.addEventListener('hit', this.onHit);
-    el.addEventListener('gripclose', this.onGripClose);
-    el.addEventListener('gripopen', this.onGripOpen);
-    el.addEventListener('thumbup', this.onGripClose);
-    el.addEventListener('thumbdown', this.onGripOpen);
-    el.addEventListener('pointup', this.onGripClose);
-    el.addEventListener('pointdown', this.onGripOpen);
+    el.addEventListener('buttondown', this.onGripClose);
+    el.addEventListener('buttonup', this.onGripOpen);
   },
 
   pause: function () {
     var el = this.el;
     el.removeEventListener('hit', this.onHit);
-    el.removeEventListener('gripclose', this.onGripClose);
-    el.removeEventListener('gripopen', this.onGripOpen);
-    el.removeEventListener('thumbup', this.onGripClose);
-    el.removeEventListener('thumbdown', this.onGripOpen);
-    el.removeEventListener('pointup', this.onGripClose);
-    el.removeEventListener('pointdown', this.onGripOpen);
+    el.addEventListener('buttondown', this.onGripClose);
+    el.addEventListener('buttonup', this.onGripOpen);
   },
 
   onGripClose: function (evt) {
+    if (this.grabbing) { return; }
     this.grabbing = true;
+    this.pressedButtonId = evt.detail.id;
     delete this.previousPosition;
   },
 
   onGripOpen: function (evt) {
     var hitEl = this.hitEl;
+    if (this.pressedButtonId !== evt.detail.id) { return; }
     this.grabbing = false;
     if (!hitEl) { return; }
     hitEl.removeState(this.GRABBED_STATE);
@@ -74,7 +70,9 @@ AFRAME.registerComponent('grab', {
   },
 
   updateDelta: function () {
-    var currentPosition = this.el.getAttribute('position');
+    var currentPosition = this.currentPosition;
+    this.el.object3D.updateMatrixWorld();
+    currentPosition.setFromMatrixPosition(this.el.object3D.matrixWorld);
     if (!this.previousPosition) {
       this.previousPosition = new THREE.Vector3();
       this.previousPosition.copy(currentPosition);

examples/showcase/tracked-controls/components/ground.js

@@ -14,7 +14,7 @@ AFRAME.registerComponent('ground', {
     objectLoader.load(MODEL_URL, function (obj) {
       obj.children.forEach(function (value) {
         value.receiveShadow = true;
-        value.material.shading = THREE.FlatShading;
+        value.material.flatShading = THREE.FlatShading;
       });
       object3D.add(obj);
     });