Skip to content
Snippets Groups Projects
Unverified Commit e50ec985 authored by Greg Fodor's avatar Greg Fodor Committed by GitHub
Browse files

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

Add camera focus and tracking
parents bd629f4a eabd042c
No related branches found
No related tags found
No related merge requests found
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);
}
});
......@@ -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;
......
......@@ -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>
......
......@@ -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";
......
// 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;
}
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment