Add support for 2d images to position-at-box-shape-border

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

 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;
         }
       }
 

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>