Merge pull request #261 from gregfagan/master

Fix look-at component for vec3 targets and cameras
supermedium · May 8, 2020 · ca892ac · ca892ac
2 parents aec9139 + d2282ca
commit ca892ac
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 18 deletions.
diff --git a/components/look-at/examples/basic/index.html b/components/look-at/examples/basic/index.html
@@ -6,6 +6,28 @@
     <meta property="og:image" content="https://raw.githubusercontent.com/supermedium/superframe/master/components/look-at/examples/basic/preview.gif"></meta>
     <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
     <script src="../../dist/aframe-look-at-component.min.js"></script>
+    <script>
+      /**
+       * Use the spacebar to swap the camera to one that is looking at the target.
+       * 
+       * Probably shouldn't do it in VR.
+       */
+      AFRAME.registerComponent('toggleable-camera', {
+        init: function () {
+          document.addEventListener('keydown', AFRAME.utils.bind(this.toggleCamera, this));
+        },
+        toggleCamera: function (e) {
+          if (e.code === 'Space') {
+            if (this.el.hasAttribute('camera')) {
+              this.el.removeAttribute('camera');
+              this.el.sceneEl.querySelector('#look-cam').setAttribute('camera', 'active', true);
+            } else {
+              this.el.setAttribute('camera', { active: true });
+            }
+          }
+        }
+      })
+    </script>
   </head>
   <body>
     <a-scene>
@@ -29,13 +51,18 @@
         <a-cylinder radius="0.2" height="2" color="#7BC8A4" look-at="#target"
           position="-4 0 1"></a-cylinder>
         <a-box width="2" depth="1" height="0.25" color="#93648D" look-at="#target"
-          position="0 0 1"></a-box>
+          position="0 0 1" toggleable-camera></a-box>
         <a-box width="1" depth="2" height="0.5" color="#999" look-at="#target"
           position="4 0 1"></a-box>
 
         <!-- This entity looks at the camera. Use WASD controls to test it -->
         <a-box width="2" depth="2" height="2" color="#FFC65D" look-at="#look-cam"
           position="-6 2.5 -2"></a-box>
+
+        <!-- This entity looks at the origin. Cone rotated to point in its lookAt direction. -->
+        <a-entity position="-4 4 -8" look-at="0 0 0">
+          <a-cone height="1" color="#C388A3" radius-bottom="0.5" radius-top="0" rotation="90 0 0"></a-cone>
+        </a-entity>
       </a-entity>
 
       <a-sky color="#ECECEC"></a-sky>

diff --git a/components/look-at/index.js b/components/look-at/index.js
@@ -17,7 +17,7 @@ delete AFRAME.components['look-at'];
  */
 AFRAME.registerComponent('look-at', {
   schema: {
-    default: '',
+    default: '0 0 0',
 
     parse: function (value) {
       // A static position to look at.
@@ -39,6 +39,9 @@ AFRAME.registerComponent('look-at', {
   init: function () {
     this.target3D = null;
     this.vector = new THREE.Vector3();
+    this.cameraListener = AFRAME.utils.bind(this.cameraListener, this);
+    this.el.addEventListener('componentinitialized', this.cameraListener);
+    this.el.addEventListener('componentremoved', this.cameraListener);
   },
 
   /**
@@ -48,7 +51,6 @@ AFRAME.registerComponent('look-at', {
   update: function () {
     var self = this;
     var target = self.data;
-    var object3D = self.el.object3D;
     var targetEl;
 
     // No longer looking at anything (i.e., look-at="").
@@ -58,7 +60,7 @@ AFRAME.registerComponent('look-at', {
 
     // Look at a position.
     if (typeof target === 'object') {
-      return object3D.lookAt(new THREE.Vector3(target.x, target.y, target.z));
+      return this.lookAt(new THREE.Vector3(target.x, target.y, target.z));
     }
 
     // Assume target is a string.
@@ -83,27 +85,42 @@ AFRAME.registerComponent('look-at', {
     return function (t) {
       // Track target object position. Depends on parent object keeping global transforms up
       // to state with updateMatrixWorld(). In practice, this is handled by the renderer.
-      var target;
       var target3D = this.target3D;
-      var object3D = this.el.object3D;
-      var vector = this.vector;
-
       if (target3D) {
         target3D.getWorldPosition(vec3);
-        if (this.el.getObject3D('camera')) {
-          // Flip the vector to -z, looking away from target for camera entities. When using
-          // lookat from THREE camera objects, this is applied for you, but since the camera is
-          // nested into a Object3D, we need to apply this manually.
-          // vector.subVectors(object3D.position, vec3).add(object3D.position);
-        } else {
-          vector = vec3;
-        }
-        object3D.lookAt(vector);
+        this.lookAt(vec3);
       }
-    };
+    }
   })(),
 
+  remove: function () {
+    this.el.removeEventListener('componentinitialized', this.cameraListener);
+    this.el.removeEventListener('componentremoved', this.cameraListener);
+  },
+
   beginTracking: function (targetEl) {
     this.target3D = targetEl.object3D;
+  },
+
+  cameraListener: function (e) {
+    if (e.detail && e.detail.name === 'camera') {
+      this.update();
+    }
+  },
+
+  lookAt: function (position) {
+    var vector = this.vector;
+    var object3D = this.el.object3D;
+
+    if (this.el.getObject3D('camera')) {
+      // Flip the vector to -z, looking away from target for camera entities. When using
+      // lookat from THREE camera objects, this is applied for you, but since the camera is
+      // nested into a Object3D, we need to apply this manually.
+      vector.subVectors(object3D.position, position).add(object3D.position);
+    } else {
+      vector.copy(position);
+    }
+
+    object3D.lookAt(vector);
   }
 });