feat(position): dialog box position, dynamically face camera

patrickocoffeyo · patrickocoffeyo · commit cb494701c35f · 2018-07-06T14:41:30.000-05:00
diff --git a/examples/advanced/index.html b/examples/advanced/index.html
@@ -9,7 +9,7 @@
   </head>
   <body>
     <a-scene inspector="url: https://aframe.io/releases/0.3.0/aframe-inspector.min.js">
-      <a-camera id="camera" wasd-controls-enabled="false" cursor="rayOrigin: mouse"></a-camera>
+      <a-camera id="camera" wasd-controls-enabled="true" cursor="rayOrigin: mouse"></a-camera>
       <a-sky color="#24CAFF"></a-sky>
       <a-entity
         id="dialog"
diff --git a/index.js b/index.js
@@ -52,10 +52,6 @@ AFRAME.registerComponent('dialog-popup', {
       type: 'string',
       default: 'click'
     },
-    defaultOpen: {
-      type: 'bool',
-      default: false
-    },
     openIconImage: {
       type: 'asset',
       default: ''
@@ -117,13 +113,23 @@ AFRAME.registerComponent('dialog-popup', {
    */
   init() {
     this.spawnEntities();
+    this.cameraEl = document.querySelector('[camera]');
+  },
+  /**
+   * If the component is open, ensure it always faces the camera.
+   */
+  tick() {
+    if (this.isOpen) {
+      this.positionDialogPlane();
+    }
   },
   /**
    * Handles opening and closing the dialog plane.
    */
   toggleDialogOpen() {
     this.isOpen = !this.isOpen;
     if (this.dialogPlane) {
+      this.positionDialogPlane();
       this.dialogPlane.setAttribute('visible', this.isOpen);
     }
   },
@@ -306,13 +312,9 @@ AFRAME.registerComponent('dialog-popup', {
     } = this.data;
 
     const plane = document.createElement('a-entity');
+    plane.setAttribute('id', `${this.el.getAttribute('id')}--dialog-plane`);
 
-    // The dialog should always be a little closer to the camera than the icon.
-    const position = Object.assign({}, this.el.getAttribute('position'));
-    position.z += 1;
-
-    plane.setAttribute('visible', this.data.defaultOpen);
-    plane.setAttribute('position', position);
+    plane.setAttribute('visible', false);
     plane.setAttribute('geometry', {
       primitive: 'plane',
       width: width + padding,
@@ -330,8 +332,17 @@ AFRAME.registerComponent('dialog-popup', {
     plane.appendChild(this.generateBody());
 
     this.dialogPlane = plane;
+
     return plane;
   },
+  positionDialogPlane() {
+    if (this.dialogPlane) {
+      const vector = this.dialogPlane.object3D.parent.worldToLocal(
+        this.cameraEl.object3D.getWorldPosition()
+      );
+      this.dialogPlane.object3D.lookAt(vector);
+    }
+  },
   spawnEntities() {
     const wrapper = document.createElement('a-entity');
     wrapper.setAttribute('id', `${this.el.getAttribute('id')}--wrapper`);
