Merge pull request #725 from mozilla/feature/camera-tracking

Add camera focus and tracking

src/components/camera-focus-button.js

+AFRAME.registerComponent("camera-focus-button", {
+  schema: {
+    track: { default: false }
+  },
+
+  init() {
+    this.cameraSystem = this.el.sceneEl.systems["camera-tools"];
+
+    NAF.utils.getNetworkedEntity(this.el).then(networkedEl => {
+      this.targetEl = networkedEl;
+    });
+
+    this.onClick = () => {
+      const myCamera = this.cameraSystem.getMyCamera();
+      if (!myCamera) return;
+
+      myCamera.components["camera-tool"].focus(this.targetEl, this.data.track);
+    };
+  },
+
+  tick() {
+    const isVisible = this.el.getAttribute("visible");
+    const shouldBeVisible = !!(this.cameraSystem && this.cameraSystem.getMyCamera());
+
+    if (isVisible !== shouldBeVisible) {
+      this.el.setAttribute("visible", shouldBeVisible);
+    }
+  },
+
+  play() {
+    this.el.addEventListener("grab-start", this.onClick);
+  },
+
+  pause() {
+    this.el.removeEventListener("grab-start", this.onClick);
+  }
+});

src/components/camera-tool.js

@@ -88,6 +88,9 @@ AFRAME.registerComponent("camera-tool", {
       selfieScreen.scale.set(-2, 2, 2);
       this.el.setObject3D("selfieScreen", selfieScreen);
 
+      this.cameraSystem = this.el.sceneEl.systems["camera-tools"];
+      this.cameraSystem.register(this.el);
+
       this.updateRenderTargetNextTick = true;
     });
   },
@@ -101,6 +104,7 @@ AFRAME.registerComponent("camera-tool", {
   },
 
   remove() {
+    this.cameraSystem.deregister(this.el);
     this.el.sceneEl.systems["camera-mirror"].unmirrorCameraAtEl(this.el);
   },
 
@@ -110,6 +114,22 @@ AFRAME.registerComponent("camera-tool", {
     }
   },
 
+  focus(el, track) {
+    this.lookAt(el);
+
+    if (track) {
+      this.trackTarget = el;
+    }
+  },
+
+  lookAt: (function() {
+    const targetPos = new THREE.Vector3();
+    return function(el) {
+      targetPos.setFromMatrixPosition(el.object3D.matrixWorld);
+      this.el.object3D.lookAt(targetPos);
+    };
+  })(),
+
   mirror() {
     this.el.sceneEl.systems["camera-mirror"].mirrorCameraAtEl(this.el);
   },
@@ -137,6 +157,15 @@ AFRAME.registerComponent("camera-tool", {
       const renderer = this.renderer || sceneEl.renderer;
       const now = performance.now();
 
+      // Perform lookAt in tock so it will re-orient after grabs, etc.
+      if (this.trackTarget) {
+        if (this.trackTarget.parentNode) {
+          this.lookAt(this.trackTarget);
+        } else {
+          this.trackTarget = null; // Target removed
+        }
+      }
+
       if (!this.playerHead) {
         const headEl = document.getElementById("player-head");
         this.playerHead = headEl && headEl.object3D;

src/hub.html

@@ -189,6 +189,12 @@
                         <a-entity class="freeze-menu" visible-while-frozen="withinDistance: 10;">
                             <a-entity mixin="rounded-text-action-button" pin-networked-object-button="labelSelector:.pin-button-label; hideWhenPinnedSelector:.hide-when-pinned;" position="0 0.125 0.01"> </a-entity>
                             <a-entity class="pin-button-label" text=" value:pin; width:1.75; align:center;" text-raycast-hack position="0 0.125 0.02"></a-entity>
+                            <a-entity mixin="rounded-text-button" camera-focus-button="track: false" position="-0.25 0.375 0.01">
+                                <a-entity text=" value:focus; width:1.75; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
+                            </a-entity>
+                            <a-entity mixin="rounded-text-button" camera-focus-button="track: true" position="0.25 0.375 0.01">
+                                <a-entity text=" value:track; width:1.75; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
+                            </a-entity>
                             <a-entity mixin="rounded-text-button" class="hide-when-pinned" remove-networked-object-button position="0 -0.125 0.01"> </a-entity>
                             <a-entity text=" value:remove; width:1.75; align:center;" class="hide-when-pinned" text-raycast-hack position="0 -0.125 0.02"></a-entity>
                         </a-entity>

src/hub.js

@@ -58,6 +58,7 @@ import "./components/position-at-box-shape-border";
 import "./components/pinnable";
 import "./components/pin-networked-object-button";
 import "./components/remove-networked-object-button";
+import "./components/camera-focus-button";
 import "./components/mirror-camera-button";
 import "./components/destroy-at-extreme-distances";
 import "./components/gamma-factor";
@@ -88,6 +89,7 @@ import "./systems/nav";
 import "./systems/personal-space-bubble";
 import "./systems/app-mode";
 import "./systems/exit-on-blur";
+import "./systems/camera-tools";
 import "./systems/userinput/userinput";
 import "./systems/camera-mirror";
 import "./systems/userinput/userinput-debug";

src/systems/camera-tools.js

+// Used for tracking and managing camera tools in the scene
+AFRAME.registerSystem("camera-tools", {
+  init() {
+    this.cameraEls = [];
+  },
+
+  register(el) {
+    this.cameraEls.push(el);
+    el.addEventListener("ownership-changed", this._onOwnershipChange);
+    this.myCamera = null;
+  },
+
+  deregister(el) {
+    this.cameraEls = this.cameraEls.filter(c => c !== el);
+    el.removeEventListener("ownership-changed", this._onOwnershipChange);
+    this.myCamera = null;
+  },
+
+  getMyCamera() {
+    if (this.myCamera) return this.myCamera;
+    this.myCamera = this.cameraEls.find(NAF.utils.isMine);
+    return this.myCamera;
+  },
+
+  _onOwnershipChange() {
+    this.myCamera = null;
+  }
+});