Bug/fix up menu box choice and scale

src/components/position-at-box-shape-border.js

@@ -8,6 +8,7 @@ const right = new THREE.Vector3(1, 0, 0);
 const forward = new THREE.Vector3(0, 0, 1);
 const left = new THREE.Vector3(-1, 0, 0);
 const back = new THREE.Vector3(0, 0, -1);
+const zero = new THREE.Vector3(0, 0, 0);
 const dirs = {
   left: {
     dir: left,
@@ -31,11 +32,6 @@ const dirs = {
   }
 };
 
-const inverseHalfExtents = {
-  x: "z",
-  z: "x"
-};
-
 AFRAME.registerComponent("position-at-box-shape-border", {
   multiple: true,
   schema: {
@@ -89,7 +85,7 @@ AFRAME.registerComponent("position-at-box-shape-border", {
     // If the target is being shown or the scale changed while the opening animation is being run,
     // we need to start or re-start the animation.
     if (opening || (scaleChanged && isAnimating)) {
-      this._updateBox(this.data.animate);
+      this._updateBox(this.data.animate, true);
     }
 
     this.wasVisible = isVisible;
@@ -102,10 +98,13 @@ AFRAME.registerComponent("position-at-box-shape-border", {
     const camWorldPos = new THREE.Vector3();
     const targetPosition = new THREE.Vector3();
     const pointOnBoxFace = new THREE.Vector3();
+    const pointOnBoxFaceToCamera = new THREE.Vector3();
+    const boxCenter = new THREE.Vector3();
     const tempParentWorldScale = new THREE.Vector3();
+    const boxFaceNormal = new THREE.Vector3();
 
-    return function(animate) {
-      if (!this.halfExtents || this.mesh !== this.el.getObject3D("mesh") || this.shape !== this.el.components.shape) {
+    return function(animate, forceNewExtents) {
+      if (forceNewExtents || this.mesh !== this.el.getObject3D("mesh") || this.shape !== this.el.components.shape) {
         this.mesh = this.el.getObject3D("mesh");
         this.shape = this.el.components.shape;
 
@@ -123,25 +122,41 @@ AFRAME.registerComponent("position-at-box-shape-border", {
       }
       getLastWorldPosition(this.cam, camWorldPos);
 
-      let minSquareDistance = Infinity;
+      let targetSquareDistance = Infinity;
       let targetDir = this.dirs[0].dir;
       let targetHalfExtentStr = this.dirs[0].halfExtent;
       let targetHalfExtent = this.halfExtents[targetHalfExtentStr];
       let targetRotation = this.dirs[0].rotation;
+      let targetCameraDot = -1.1;
 
       for (let i = 0; i < this.dirs.length; i++) {
         const dir = this.dirs[i].dir;
         const halfExtentStr = this.dirs[i].halfExtent;
         const halfExtent = this.halfExtents[halfExtentStr];
         pointOnBoxFace.copy(dir).multiplyScalar(halfExtent);
+        boxCenter.copy(zero);
+
         this.el.object3D.localToWorld(pointOnBoxFace);
+        this.el.object3D.localToWorld(boxCenter);
+
+        pointOnBoxFaceToCamera.subVectors(camWorldPos, pointOnBoxFace);
+        pointOnBoxFaceToCamera.normalize();
+
+        boxFaceNormal.subVectors(pointOnBoxFace, boxCenter);
+        boxFaceNormal.normalize();
+
+        // Compute dot between camera + box normal to ensure menus are going to be
+        // somewhat perpendicular to camera frustum
+        const cameraAngleDotBoxNormal = boxFaceNormal.dot(pointOnBoxFaceToCamera);
+
         const squareDistance = pointOnBoxFace.distanceToSquared(camWorldPos);
-        if (squareDistance < minSquareDistance) {
-          minSquareDistance = squareDistance;
+        if (cameraAngleDotBoxNormal > targetCameraDot) {
+          targetSquareDistance = squareDistance;
           targetDir = dir;
           targetHalfExtent = halfExtent;
           targetRotation = this.dirs[i].rotation;
           targetHalfExtentStr = halfExtentStr;
+          targetCameraDot = cameraAngleDotBoxNormal;
         }
       }
 
@@ -150,8 +165,8 @@ AFRAME.registerComponent("position-at-box-shape-border", {
 
       tempParentWorldScale.setFromMatrixScale(this.target.parent.matrixWorld);
 
-      const distance = Math.sqrt(minSquareDistance);
-      const scale = this.halfExtents[inverseHalfExtents[targetHalfExtentStr]] * distance;
+      const distance = Math.sqrt(targetSquareDistance);
+      const scale = Math.max(this.halfExtents.x, this.halfExtents.z) * distance;
       const targetScale = Math.min(2.0, Math.max(0.5, scale * tempParentWorldScale.x));
       const finalScale = this.data.scale ? targetScale / tempParentWorldScale.x : 1;
 

src/components/text-button.js

@@ -13,6 +13,8 @@ AFRAME.registerComponent("text-button", {
   },
 
   init() {
+    // TODO: This is a bit of a hack to deal with position "component" not setting matrixNeedsUpdate. Come up with a better solution.
+    this.el.object3D.matrixNeedsUpdate = true;
     this.onHover = () => {
       this.hovering = true;
       this.updateButtonState();