From 76dca645e1f870272532c3bf632b197830901d06 Mon Sep 17 00:00:00 2001
From: joni <johnfshaughnessy@gmail.com>
Date: Mon, 2 Jul 2018 17:06:22 -0700
Subject: [PATCH] Add support for 2d images to position-at-box-shape-border
---
.../position-at-box-shape-border.js | 46 ++++++++++++++-----
src/hub.html | 7 +--
2 files changed, 39 insertions(+), 14 deletions(-)
diff --git a/src/components/position-at-box-shape-border.js b/src/components/position-at-box-shape-border.js
index f85d744a9..59776bf6d 100644
--- a/src/components/position-at-box-shape-border.js
+++ b/src/components/position-at-box-shape-border.js
@@ -1,22 +1,47 @@
const PI = Math.PI;
const HALF_PI = PI / 2;
const THREE_HALF_PI = 3 * PI / 2;
-const rotations = [THREE_HALF_PI, HALF_PI, 0, PI];
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 dirs = [left, right, forward, back];
+const dirs = {
+ left: {
+ dir: left,
+ rotation: THREE_HALF_PI,
+ halfExtent: "x"
+ },
+ right: {
+ dir: right,
+ rotation: HALF_PI,
+ halfExtent: "x"
+ },
+ forward: {
+ dir: forward,
+ rotation: 0,
+ halfExtent: "z"
+ },
+ back: {
+ dir: back,
+ rotation: PI,
+ halfExtent: "z"
+ }
+};
AFRAME.registerComponent("position-at-box-shape-border", {
schema: {
- target: { type: "string" }
+ target: { type: "string" },
+ dirs: { default: ["left", "right", "forward", "back"] }
},
init() {
this.cam = this.el.sceneEl.camera.el.object3D;
},
+ update() {
+ this.dirs = this.data.dirs.map(d => dirs[d]);
+ },
+
tick: (function() {
const camWorldPos = new THREE.Vector3();
const targetPosition = new THREE.Vector3();
@@ -31,17 +56,16 @@ AFRAME.registerComponent("position-at-box-shape-border", {
if (!this.target) return;
}
const halfExtents = this.shape.data.halfExtents;
- const halfExtentDirs = ["x", "x", "z", "z"];
this.cam.getWorldPosition(camWorldPos);
let minSquareDistance = Infinity;
- let targetDir = dirs[0];
- let targetHalfExtent = halfExtents[halfExtentDirs[0]];
- let targetRotation = rotations[0];
+ let targetDir = this.dirs[0].dir;
+ let targetHalfExtent = halfExtents[this.dirs[0].halfExtent];
+ let targetRotation = this.dirs[0].rotation;
- for (let i = 0; i < dirs.length; i++) {
- const dir = dirs[i];
- const halfExtent = halfExtents[halfExtentDirs[i]];
+ for (let i = 0; i < this.dirs.length; i++) {
+ const dir = this.dirs[i].dir;
+ const halfExtent = halfExtents[this.dirs[i].halfExtent];
pointOnBoxFace.copy(dir).multiplyScalar(halfExtent);
this.el.object3D.localToWorld(pointOnBoxFace);
const squareDistance = pointOnBoxFace.distanceToSquared(camWorldPos);
@@ -49,7 +73,7 @@ AFRAME.registerComponent("position-at-box-shape-border", {
minSquareDistance = squareDistance;
targetDir = dir;
targetHalfExtent = halfExtent;
- targetRotation = rotations[i];
+ targetRotation = this.dirs[i].rotation;
}
}
diff --git a/src/hub.html b/src/hub.html
index caa267388..1581794db 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -205,10 +205,11 @@
material="shader: flat; side: double; transparent: true;"
image-plus
sticky-object="autoLockOnLoad: true; autoLockOnRelease: true;"
+ position-at-box-shape-border="target:.delete-button;dirs:forward,back"
>
- <a-entity visible-while-frozen>
- <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 .08"> </a-entity>
- <a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.09"></a-entity>
+ <a-entity class="delete-button" visible-while-frozen>
+ <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
+ <a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
</a-entity>
</a-entity>
</template>
--
GitLab