From 367b1ab3fcf79beb5eba4c4083df92886f96ecb4 Mon Sep 17 00:00:00 2001 From: netpro2k Date: Fri, 21 Dec 2018 14:50:12 -0800 Subject: [PATCH 1/6] Hacky fix for button position on cloned objects --- src/components/text-button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/text-button.js b/src/components/text-button.js index bee22c7504..0d02d4d818 100644 --- a/src/components/text-button.js +++ b/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(); From ba7e72bf7eb5a0ac16276433e45ab21f678396ef Mon Sep 17 00:00:00 2001 From: Greg Fodor Date: Sat, 16 Feb 2019 21:15:38 +0000 Subject: [PATCH 2/6] Use dot product to pick box face --- .../position-at-box-shape-border.js | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/position-at-box-shape-border.js b/src/components/position-at-box-shape-border.js index d63ff86806..15dfc43c89 100644 --- a/src/components/position-at-box-shape-border.js +++ b/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, @@ -102,7 +103,10 @@ 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) { @@ -123,25 +127,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 +170,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; From bf259431aa321eca0e0cf87c4fe833d6f557a9c4 Mon Sep 17 00:00:00 2001 From: Greg Fodor Date: Sat, 16 Feb 2019 21:19:36 +0000 Subject: [PATCH 3/6] Remove unused var --- src/components/position-at-box-shape-border.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/position-at-box-shape-border.js b/src/components/position-at-box-shape-border.js index 15dfc43c89..e4eb456c3e 100644 --- a/src/components/position-at-box-shape-border.js +++ b/src/components/position-at-box-shape-border.js @@ -32,11 +32,6 @@ const dirs = { } }; -const inverseHalfExtents = { - x: "z", - z: "x" -}; - AFRAME.registerComponent("position-at-box-shape-border", { multiple: true, schema: { From b6c7c5d6dc2a1c89eab071a9f9f877531e5dc478 Mon Sep 17 00:00:00 2001 From: Greg Fodor Date: Sun, 17 Feb 2019 06:48:03 +0000 Subject: [PATCH 4/6] Fix bug with initial menu scale on duck --- src/components/position-at-box-shape-border.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/position-at-box-shape-border.js b/src/components/position-at-box-shape-border.js index e4eb456c3e..093fa8834f 100644 --- a/src/components/position-at-box-shape-border.js +++ b/src/components/position-at-box-shape-border.js @@ -85,6 +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.halfExtents = null; this._updateBox(this.data.animate); } From 57e6815f311312f74150348e90f030550bc680de Mon Sep 17 00:00:00 2001 From: Greg Fodor Date: Sun, 17 Feb 2019 06:57:51 +0000 Subject: [PATCH 5/6] Fix --- src/components/position-at-box-shape-border.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/position-at-box-shape-border.js b/src/components/position-at-box-shape-border.js index 093fa8834f..bb96d56768 100644 --- a/src/components/position-at-box-shape-border.js +++ b/src/components/position-at-box-shape-border.js @@ -85,8 +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.halfExtents = null; - this._updateBox(this.data.animate); + this._updateBox(this.data.animate, true); } this.wasVisible = isVisible; @@ -104,8 +103,8 @@ AFRAME.registerComponent("position-at-box-shape-border", { 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, force) { + if (force || this.mesh !== this.el.getObject3D("mesh") || this.shape !== this.el.components.shape) { this.mesh = this.el.getObject3D("mesh"); this.shape = this.el.components.shape; From 80e343c62a987310f4c78407103b0b759c4d183d Mon Sep 17 00:00:00 2001 From: Greg Fodor Date: Sun, 17 Feb 2019 06:58:45 +0000 Subject: [PATCH 6/6] Rename --- src/components/position-at-box-shape-border.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/position-at-box-shape-border.js b/src/components/position-at-box-shape-border.js index bb96d56768..5cdda3ca0d 100644 --- a/src/components/position-at-box-shape-border.js +++ b/src/components/position-at-box-shape-border.js @@ -103,8 +103,8 @@ AFRAME.registerComponent("position-at-box-shape-border", { const tempParentWorldScale = new THREE.Vector3(); const boxFaceNormal = new THREE.Vector3(); - return function(animate, force) { - if (force || 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;