Add a camera rig to set the user height. look-controls is no longer responsible of implicitly setting the user height. It is up to the content creator to build a camera rig that sets the user height as

dmarcos · dmarcos · commit ebfae4590a4a · 2018-01-08T16:54:10.000-08:00
appropriate. The examples have been updated to reflect this change (fix #3315, #3118, #3051, #2487)
diff --git a/docs/components/camera.md b/docs/components/camera.md
@@ -16,7 +16,9 @@ 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">
+  <a-entity camera look-controls></a-entity>
+</a-entity>
 ```
 
 ## Properties
@@ -36,22 +38,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.
diff --git a/docs/components/look-controls.md b/docs/components/look-controls.md
@@ -30,7 +30,6 @@ component](camera.md).
 | 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          |
-| 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
 
@@ -49,8 +48,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
 
diff --git a/docs/primitives/a-camera.md b/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          |
 
diff --git a/examples/animation/aframe-logo/index.html b/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>
 
diff --git a/examples/animation/generic-logo/index.html b/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 -->
diff --git a/examples/animation/pivots/index.html b/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 -->
diff --git a/examples/showcase/anime-UI/index.html b/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">
diff --git a/examples/showcase/link-traversal/js/components/ground.js b/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);
diff --git a/examples/showcase/tracked-controls/components/ground.js b/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);
     });
diff --git a/examples/showcase/tracked-controls/index.html b/examples/showcase/tracked-controls/index.html
@@ -27,10 +27,6 @@
                  material="color: #EF2D5E;"></a-mixin>
       </a-assets>
 
-      <!-- Hands -->
-      <a-entity hand-controls="left" aabb-collider="objects: .cube;" grab></a-entity>
-      <a-entity hand-controls="right" aabb-collider="objects: .cube;" grab></a-entity>
-
       <!-- A-Frame cubes -->
       <a-entity position="0 0 -0.5">
         <a-entity class="cube" mixin="cube" position="0.30 1.65 0"></a-entity>
@@ -62,8 +58,11 @@
          <a-entity light="type: point; color: #f4f4f4; intensity: 0.6; distance: 0" position="-8 10 -18"></a-entity>
          <a-entity light="type: ambient; color: #f4f4f4; intensity: 0.4;" position="-8 10 -18"></a-entity>
       </a-entity>
-      <a-camera></a-camera>
-
+      <a-entity position="0 1.6 0">
+        <!-- Hands -->
+        <a-entity hand-controls="left" aabb-collider="objects: .cube;" grab></a-entity>
+        <a-entity hand-controls="right" aabb-collider="objects: .cube;" grab></a-entity>
+      </a-entity>
     </a-scene>
   </body>
 </html>
diff --git a/examples/test/animation/index.html b/examples/test/animation/index.html
@@ -18,7 +18,7 @@
       </a-assets>
 
       <a-entity position="0 0 6">
-        <a-camera wasd-controls-enabled="false" user-height="0"></a-camera>
+        <a-camera wasd-controls-enabled="false"></a-camera>
       </a-entity>
 
       <a-entity rotation="0 0 0" position="0 0 -5">
diff --git a/examples/test/cylinders/index.html b/examples/test/cylinders/index.html
@@ -14,7 +14,7 @@
       </a-assets>
 
       <a-entity position="0 0 8">
-        <a-camera user-height="0"></a-camera>
+        <a-camera></a-camera>
       </a-entity>
 
       <a-entity mixin="cylinder" position="-10 0 0" rotation="45 0 -45"
diff --git a/examples/test/laser-controls/index.html b/examples/test/laser-controls/index.html
@@ -49,8 +49,13 @@
     </script>
 
     <a-scene background="color: #212" antialias="true">
-      <a-entity id="leftHand" laser-controls="hand: left" raycaster="objects: [mixin='box']"></a-entity>
-      <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects: [mixin='box']" line="color: #118A7E"></a-entity>
+       
+      <a-entity position="0 1.6 0">
+          <a-entity camera look-controls wasd-controls></a-entity>
+          <a-entity id="leftHand" laser-controls="hand: left" raycaster="objects: [mixin='box']"></a-entity>
+          <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects: [mixin='box']" line="color: #118A7E"></a-entity>
+        </a-entity>
+      </a-entity>
 
       <a-light position="0 0.5 1" intensity="0.75"></a-light>
 
diff --git a/src/components/look-controls.js b/src/components/look-controls.js
@@ -21,8 +21,7 @@ module.exports.Component = registerComponent('look-controls', {
     enabled: {default: true},
     touchEnabled: {default: true},
     hmdEnabled: {default: true},
-    reverseMouseDrag: {default: false},
-    userHeight: {default: 1.6}
+    reverseMouseDrag: {default: false}
   },
 
   init: function () {
@@ -48,9 +47,6 @@ module.exports.Component = registerComponent('look-controls', {
   update: function (oldData) {
     var data = this.data;
 
-    // Update height offset.
-    this.addHeightOffset(oldData.userHeight);
-
     // Disable grab cursor classes if no longer enabled.
     if (data.enabled !== oldData.enabled) {
       this.updateGrabCursor(data.enabled);
@@ -323,7 +319,6 @@ module.exports.Component = registerComponent('look-controls', {
    */
   onEnterVR: function () {
     this.saveCameraPose();
-    this.removeHeightOffset();
   },
 
   /**
@@ -367,40 +362,12 @@ module.exports.Component = registerComponent('look-controls', {
   addHeightOffset: function (oldOffset) {
     var el = this.el;
     var currentPosition;
-    var userHeightOffset = this.data.userHeight;
 
     oldOffset = oldOffset || 0;
     currentPosition = el.getAttribute('position') || {x: 0, y: 0, z: 0};
     el.setAttribute('position', {
       x: currentPosition.x,
-      y: currentPosition.y - oldOffset + userHeightOffset,
-      z: currentPosition.z
-    });
-  },
-
-  /**
-   * Remove the height offset (called when entering VR) since WebVR API gives absolute
-   * position.
-   */
-  removeHeightOffset: function () {
-    var currentPosition;
-    var el = this.el;
-    var hasPositionalTracking;
-    var userHeightOffset = this.data.userHeight;
-
-    // Remove the offset if there is positional tracking when entering VR.
-    // Necessary for fullscreen mode with no headset.
-    // Checking this.hasPositionalTracking to make the value injectable for unit tests.
-    hasPositionalTracking = this.hasPositionalTracking !== undefined
-      ? this.hasPositionalTracking
-      : checkHasPositionalTracking();
-
-    if (!userHeightOffset || !hasPositionalTracking) { return; }
-
-    currentPosition = el.getAttribute('position') || {x: 0, y: 0, z: 0};
-    el.setAttribute('position', {
-      x: currentPosition.x,
-      y: currentPosition.y - userHeightOffset,
+      y: currentPosition.y - oldOffset,
       z: currentPosition.z
     });
   },
diff --git a/src/components/tracked-controls.js b/src/components/tracked-controls.js
@@ -99,16 +99,14 @@ module.exports.Component = registerComponent('tracked-controls', {
     var controllerQuaternion = this.controllerQuaternion;
     var deltaControllerPosition = this.deltaControllerPosition;
     var hand;
-    var headCamera;
     var headEl;
     var headObject3D;
     var pose;
     var userHeight;
 
     headEl = this.getHeadElement();
     headObject3D = headEl.object3D;
-    headCamera = headEl.components.camera;
-    userHeight = (headCamera ? headCamera.data.userHeight : 0) || this.defaultUserHeight();
+    userHeight = this.defaultUserHeight();
 
     pose = controller.pose;
     hand = (controller ? controller.hand : undefined) || DEFAULT_HANDEDNESS;
@@ -156,11 +154,7 @@ module.exports.Component = registerComponent('tracked-controls', {
     var dolly = this.dolly;
     var el = this.el;
     var pose;
-    var standingMatrix = this.standingMatrix;
     var vrDisplay = this.system.vrDisplay;
-    var headEl = this.getHeadElement();
-    var headCamera = headEl.components.camera;
-    var userHeight = (headCamera ? headCamera.data.userHeight : 0) || this.defaultUserHeight();
 
     if (!controller) { return; }
 
@@ -180,16 +174,6 @@ module.exports.Component = registerComponent('tracked-controls', {
 
     // Apply transforms, if 6DOF and in VR.
     if (pose.position != null && vrDisplay) {
-      if (vrDisplay.stageParameters) {
-        standingMatrix.fromArray(vrDisplay.stageParameters.sittingToStandingTransform);
-        dolly.matrix.compose(dolly.position, dolly.quaternion, dolly.scale);
-        dolly.matrix.multiplyMatrices(standingMatrix, dolly.matrix);
-      } else {
-        // Apply default camera height
-        dolly.position.y += userHeight;
-        dolly.matrix.compose(dolly.position, dolly.quaternion, dolly.scale);
-      }
-    } else {
       dolly.matrix.compose(dolly.position, dolly.quaternion, dolly.scale);
     }
 
diff --git a/src/extras/primitives/primitives/a-camera.js b/src/extras/primitives/primitives/a-camera.js
@@ -1,12 +1,9 @@
-var DEFAULT_CAMERA_HEIGHT = require('../../../constants/').DEFAULT_CAMERA_HEIGHT;
 var registerPrimitive = require('../primitives').registerPrimitive;
 
 registerPrimitive('a-camera', {
   defaultComponents: {
     'camera': {},
-    'look-controls': {
-      userHeight: DEFAULT_CAMERA_HEIGHT
-    },
+    'look-controls': {},
     'wasd-controls': {}
   },
 
@@ -18,7 +15,6 @@ registerPrimitive('a-camera', {
     near: 'camera.near',
     'wasd-controls-enabled': 'wasd-controls.enabled',
     'reverse-mouse-drag': 'look-controls.reverseMouseDrag',
-    'user-height': 'look-controls.userHeight',
     zoom: 'camera.zoom'
   }
 });
diff --git a/src/style/aframe.css b/src/style/aframe.css
@@ -5,6 +5,7 @@
   position: fixed;
   right: 0;
   top: 0;
+  --caca: 0;
 }
 
 /* Applied to the body element */
diff --git a/src/systems/camera.js b/src/systems/camera.js
@@ -26,22 +26,31 @@ module.exports.System = registerSystem('camera', {
   setupDefaultCamera: function () {
     var sceneEl = this.sceneEl;
     var defaultCameraEl;
+    var cameraRigEl;
 
     // Camera already defined or the one defined it is an spectator one.
     if (sceneEl.camera && !sceneEl.camera.el.getAttribute('camera').spectator) {
       sceneEl.emit('camera-ready', {cameraEl: sceneEl.camera.el});
       return;
     }
 
+    // Set up camera rig.
+    cameraRigEl = document.createElement('a-entity');
+    cameraRigEl.setAttribute('position', {
+      x: 0,
+      y: constants.DEFAULT_CAMERA_HEIGHT,
+      z: 0
+    });
+
     // Set up default camera.
     defaultCameraEl = document.createElement('a-entity');
-    defaultCameraEl.setAttribute('position', '0 0 0');
-    defaultCameraEl.setAttribute(DEFAULT_CAMERA_ATTR, '');
     defaultCameraEl.setAttribute('camera', {active: true});
     defaultCameraEl.setAttribute('wasd-controls', '');
-    defaultCameraEl.setAttribute('look-controls', {userHeight: constants.DEFAULT_CAMERA_HEIGHT});
+    defaultCameraEl.setAttribute('look-controls', '');
     defaultCameraEl.setAttribute(constants.AFRAME_INJECTED, '');
-    sceneEl.appendChild(defaultCameraEl);
+    cameraRigEl.setAttribute(DEFAULT_CAMERA_ATTR, '');
+    cameraRigEl.appendChild(defaultCameraEl);
+    sceneEl.appendChild(cameraRigEl);
     sceneEl.addEventListener('enter-vr', this.removeDefaultOffset);
     sceneEl.addEventListener('exit-vr', this.addDefaultOffset);
     sceneEl.emit('camera-ready', {cameraEl: defaultCameraEl});
diff --git a/tests/components/look-controls.test.js b/tests/components/look-controls.test.js
diff --git a/tests/components/tracked-controls.test.js b/tests/components/tracked-controls.test.js
diff --git a/tests/core/controls.test.js b/tests/core/controls.test.js
diff --git a/tests/extras/primitives/primitives/a-camera.test.js b/tests/extras/primitives/primitives/a-camera.test.js

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ AFRAME.registerComponent('ground', {`
`15`	`15`	`value.geometry.computeFaceNormals();`
`16`	`16`	`value.geometry.computeVertexNormals();`
`17`	`17`	`value.receiveShadow = true;`
`18`		`- value.material.shading = THREE.FlatShading;`
	`18`	`+ value.material.flatShading = THREE.FlatShading;`
`19`	`19`	`}`
`20`	`20`	`});`
`21`	`21`	`self.el.setObject3D('ground', obj);`