Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Camera focus and tracking #725

Merged
merged 4 commits into from
Nov 16, 2018
Merged

Camera focus and tracking #725

merged 4 commits into from
Nov 16, 2018

Conversation

gfodor
Copy link
Contributor

@gfodor gfodor commented Nov 12, 2018

Adds the ability to focus and track objects on your current camera.

Note this feature isn't going to be very useful until we fix the pause menu on avatars, which seems broken. Once fixed, we should add "focus" and "track" buttons to avatars as well.

@gfodor gfodor added the whats new Include this PR on the "What's New" page label Nov 12, 2018
@gfodor gfodor requested a review from netpro2k November 12, 2018 05:53
if (track) {
this.trackTarget = el;

this.trackTarget.addEventListener("componentremoved", e => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a better way to do this? Trying to detect removal of the element.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "correct" way is probably using a MutationObserver but in this case I would probably just check for this.trackTarget && !this.trackTarget.parrentNode in tick.

@buildsize
Copy link

buildsize bot commented Nov 12, 2018

File name Previous Size New Size Change
avatar-selector.html 616 bytes 616 bytes 0 bytes (0%)
favicon.ico 33.69 KB 33.69 KB 0 bytes (0%)
hub-preview.png 16.5 KB 16.5 KB 0 bytes (0%)
hub.html 41.71 KB 42.31 KB 616 bytes (1%)
index.html 695 bytes 695 bytes 0 bytes (0%)
link.html 803 bytes 803 bytes 0 bytes (0%)
LoadingObject_Atom-[hash].glb 27.43 KB 27.43 KB 0 bytes (0%)
waternormals-[hash].jpg 242.98 KB 242.98 KB 0 bytes (0%)
bubble_off-[hash].png 4.22 KB 4.22 KB 0 bytes (0%)
bubble_off-hover-[hash].png 5.85 KB 5.85 KB 0 bytes (0%)
bubble_on-[hash].png 5.65 KB 5.65 KB 0 bytes (0%)
bubble_on-hover-[hash].png 5.46 KB 5.46 KB 0 bytes (0%)
create_object-[hash].png 8.38 KB 8.38 KB 0 bytes (0%)
create_object-hover-[hash].png 10.65 KB 10.65 KB 0 bytes (0%)
freeze_off-[hash].png 7.53 KB 7.53 KB 0 bytes (0%)
freeze_off-hover-[hash].png 9.96 KB 9.96 KB 0 bytes (0%)
freeze_on-[hash].png 7.36 KB 7.36 KB 0 bytes (0%)
freeze_on-hover-[hash].png 9.45 KB 9.45 KB 0 bytes (0%)
mute_off-[hash].png 2.76 KB 2.76 KB 0 bytes (0%)
mute_off-hover-[hash].png 3.65 KB 3.65 KB 0 bytes (0%)
mute_on-[hash].png 5.48 KB 5.48 KB 0 bytes (0%)
mute_on-hover-[hash].png 5.29 KB 5.29 KB 0 bytes (0%)
spawn_photo-[hash].png 3.14 KB 3.14 KB 0 bytes (0%)
tooltip.9-[hash].png 640 bytes 640 bytes 0 bytes (0%)
account-[hash].svg 826 bytes 826 bytes 0 bytes (0%)
daydream_entry-[hash].svg 6.45 KB 6.45 KB 0 bytes (0%)
default_thumbnail-[hash].png 3.02 KB 3.02 KB 0 bytes (0%)
desktop_screen_entry-[hash].svg 376 bytes 376 bytes 0 bytes (0%)
device_entry-[hash].svg 10.47 KB 10.47 KB 0 bytes (0%)
dropdown_arrow-[hash].png 172 bytes 172 bytes 0 bytes (0%)
dropdown_arrow@2x-[hash].png 233 bytes 233 bytes 0 bytes (0%)
gearvr_entry-[hash].svg 574 bytes 574 bytes 0 bytes (0%)
generic_vr_entry-[hash].svg 950 bytes 950 bytes 0 bytes (0%)
giphy_logo-[hash].png 1.02 KB 1.02 KB 0 bytes (0%)
level_background-[hash].png 4.03 KB 4.03 KB 0 bytes (0%)
level_background@2x-[hash].png 4.63 KB 4.63 KB 0 bytes (0%)
level_fill-[hash].png 1.03 KB 1.03 KB 0 bytes (0%)
level_fill@2x-[hash].png 2.02 KB 2.02 KB 0 bytes (0%)
logo-[hash].svg 14.21 KB 14.21 KB 0 bytes (0%)
mic_denied-[hash].png 2.02 KB 2.02 KB 0 bytes (0%)
mic_denied@2x-[hash].png 3.97 KB 3.97 KB 0 bytes (0%)
mic_granted-[hash].png 2.21 KB 2.21 KB 0 bytes (0%)
mic_granted@2x-[hash].png 4.26 KB 4.26 KB 0 bytes (0%)
mic_level-[hash].png 697 bytes 697 bytes 0 bytes (0%)
mic_level@2x-[hash].png 1.48 KB 1.48 KB 0 bytes (0%)
mic_small-[hash].png 234 bytes 234 bytes 0 bytes (0%)
mic_small@2x-[hash].png 370 bytes 370 bytes 0 bytes (0%)
mobile_screen_entry-[hash].svg 914 bytes 914 bytes 0 bytes (0%)
speaker_level-[hash].png 626 bytes 626 bytes 0 bytes (0%)
speaker_level@2x-[hash].png 1.29 KB 1.29 KB 0 bytes (0%)
warning_icon-[hash].png 442 bytes 442 bytes 0 bytes (0%)
warning_icon@2x-[hash].png 699 bytes 699 bytes 0 bytes (0%)
aframe-inspector.min-[hash].js 384.44 KB 384.44 KB 0 bytes (0%)
avatar-selector-[hash].js 40.16 KB 40.16 KB 0 bytes (0%)
avatar-selector-[hash].js.map 83.98 KB 83.98 KB 0 bytes (0%)
engine-[hash].js 1.41 MB 1.41 MB 2 bytes (0%)
engine-[hash].js.map 4.45 MB 4.45 MB 0 bytes (0%)
gifparsing.worker-[hash].js 1.91 KB 1.91 KB 0 bytes (0%)
gifparsing.worker-[hash].js.map 8.32 KB 8.32 KB 0 bytes (0%)
hub-[hash].js 439.28 KB 440.92 KB 1.64 KB (0%)
hub-[hash].js.map 1.03 MB 1.04 MB 4.22 KB (0%)
index-[hash].js 52.92 KB 52.92 KB 0 bytes (0%)
index-[hash].js.map 88.95 KB 88.95 KB 0 bytes (0%)
link-[hash].js 30.55 KB 30.55 KB 0 bytes (0%)
link-[hash].js.map 63.74 KB 63.74 KB 0 bytes (0%)
sketchfab-zip.worker-[hash].js 155.49 KB 155.49 KB 0 bytes (0%)
sketchfab-zip.worker-[hash].js.map 774.45 KB 774.45 KB 0 bytes (0%)
vendor-[hash].js 611.13 KB 611.14 KB 2 bytes (0%)
vendor-[hash].js.map 2.02 MB 2.02 MB 0 bytes (0%)
quack-[hash].mp3 7.03 KB 7.03 KB 0 bytes (0%)
specialquack-[hash].mp3 11.57 KB 11.57 KB 0 bytes (0%)
tone-[hash].mp3 53.92 KB 53.92 KB 0 bytes (0%)
tone-[hash].wav 385.29 KB 385.29 KB 0 bytes (0%)
tone-[hash].webm 32.04 KB 32.04 KB 0 bytes (0%)
tone-[hash].ogg 32.55 KB 32.55 KB 0 bytes (0%)
avatar-selector-[hash].css 1.15 KB 1.15 KB 0 bytes (0%)
avatar-selector-[hash].css.map 136 bytes 136 bytes 0 bytes (0%)
hub-[hash].css 84.45 KB 84.45 KB 0 bytes (0%)
hub-[hash].css.map 124 bytes 124 bytes 0 bytes (0%)
index-[hash].css 38.47 KB 38.47 KB 0 bytes (0%)
index-[hash].css.map 126 bytes 126 bytes 0 bytes (0%)
link-[hash].css 6.1 KB 6.1 KB 0 bytes (0%)
link-[hash].css.map 125 bytes 125 bytes 0 bytes (0%)
home-[hash].mp4 2 MB 2 MB 0 bytes (0%)
home-[hash].webm 1.81 MB 1.81 MB 0 bytes (0%)
negx-[hash].jpg 54.45 KB 54.45 KB 0 bytes (0%)
negy-[hash].jpg 50.97 KB 50.97 KB 0 bytes (0%)
negz-[hash].jpg 53.29 KB 53.29 KB 0 bytes (0%)
posx-[hash].jpg 58.64 KB 58.64 KB 0 bytes (0%)
posy-[hash].jpg 19.17 KB 19.17 KB 0 bytes (0%)
posz-[hash].jpg 57.49 KB 57.49 KB 0 bytes (0%)
spawn_pen-[hash].png 2.39 KB 2.39 KB 0 bytes (0%)
spawn_pen-hover-[hash].png 3.07 KB 3.07 KB 0 bytes (0%)
spawn_camera-[hash].png 4.92 KB 4.92 KB 0 bytes (0%)
spawn_camera-hover-[hash].png 5.83 KB 5.83 KB 0 bytes (0%)
scene.html 1.55 KB 1.55 KB 0 bytes (0%)
scene-[hash].js 114.04 KB 114.04 KB 0 bytes (0%)
scene-[hash].js.map 250.93 KB 250.93 KB 0 bytes (0%)
scene-[hash].css 11.13 KB 11.13 KB 0 bytes (0%)
scene-[hash].css.map 126 bytes 126 bytes 0 bytes (0%)
camera_tool-[hash].glb 757.23 KB 757.23 KB 0 bytes (0%)
hub-preview-white-[hash].png 62.76 KB 62.76 KB 0 bytes (0%)
link_dialog_header-[hash].svg 950 bytes 950 bytes 0 bytes (0%)
moz-logo-black-[hash].png 1.71 KB 1.71 KB 0 bytes (0%)
hub-preview-light-no-shadow-[hash].png 9.35 KB 9.35 KB 0 bytes (0%)
spoke.html 1.42 KB 1.42 KB 0 bytes (0%)
spoke-[hash].js 17.77 KB 17.77 KB 0 bytes (0%)
spoke-[hash].js.map 28.21 KB 28.21 KB 0 bytes (0%)
spoke-[hash].css 6.32 KB 6.32 KB 0 bytes (0%)
spoke-[hash].css.map 126 bytes 126 bytes 0 bytes (0%)
spoke_logo-[hash].png 148.82 KB 148.82 KB 0 bytes (0%)
spoke_logo_black-[hash].png 45.87 KB 45.87 KB 0 bytes (0%)
twitter-[hash].svg 869 bytes 869 bytes 0 bytes (0%)
tap_mellow-[hash].wav 624 bytes 624 bytes 0 bytes (0%)
presence_desktop-[hash].png 252 bytes 252 bytes 0 bytes (0%)
presence_phone-[hash].png 237 bytes 237 bytes 0 bytes (0%)
presence_vr-[hash].png 558 bytes 558 bytes 0 bytes (0%)
hub.service.js 1.34 KB 1.34 KB 0 bytes (0%)
spoke-[hash].webm 5.52 MB 5.52 MB 0 bytes (0%)
spoke-[hash].mp4 6.27 MB 6.27 MB 0 bytes (0%)
action_button.9-[hash].png 2.08 KB 2.08 KB 0 bytes (0%)
spawn_message-[hash].png 625 bytes 625 bytes 0 bytes (0%)
share_camera_off-[hash].png 4.08 KB 4.08 KB 0 bytes (0%)
share_camera_on-[hash].png 6.58 KB 6.58 KB 0 bytes (0%)
share_camera_on-hover-[hash].png 4.44 KB 4.44 KB 0 bytes (0%)
share_screen_off-[hash].png 4.22 KB 4.22 KB 0 bytes (0%)
share_screen_on-[hash].png 6.66 KB 6.66 KB 0 bytes (0%)
share_screen_on-hover-[hash].png 6.8 KB 6.8 KB 0 bytes (0%)
share_window_off-[hash].png 4.13 KB 4.13 KB 0 bytes (0%)
share_window_on-[hash].png 6.62 KB 6.62 KB 0 bytes (0%)
share_window_on-hover-[hash].png 6.7 KB 6.7 KB 0 bytes (0%)
A_bendUp-[hash].wav 60.04 KB 60.04 KB 0 bytes (0%)
Eb_blip-[hash].wav 5.88 KB 5.88 KB 0 bytes (0%)
PenDraw1-[hash].wav 16.04 KB 16.04 KB 0 bytes (0%)
PenSpawn-[hash].wav 12.04 KB 12.04 KB 0 bytes (0%)
PicSnapHey-[hash].wav 120.04 KB 120.04 KB 0 bytes (0%)
quickTurn-[hash].wav 16.04 KB 16.04 KB 0 bytes (0%)
share_message-[hash].png 18.9 KB 18.9 KB 0 bytes (0%)
presence-count-[hash].png 1.78 KB 1.78 KB 0 bytes (0%)
pop-[hash].wav 192.54 KB 192.54 KB 0 bytes (0%)
tack-[hash].wav 40.84 KB 40.84 KB 0 bytes (0%)
suspense-[hash].wav 508.04 KB 508.04 KB 0 bytes (0%)
teleportArc-[hash].wav 184.04 KB 184.04 KB 0 bytes (0%)
welcome-[hash].wav 830.82 KB 830.82 KB 0 bytes (0%)
tick-[hash].wav 8.04 KB 8.04 KB 0 bytes (0%)

Copy link
Contributor

@netpro2k netpro2k left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice little feature. We should definitely rename the camera system, surprised this didn't cause major issues since it should shadow the built in camera system in aframe. I would also get rid of the Vector3 allocation in lookAt, the other suggestions are up to you.

@@ -0,0 +1,28 @@
// Used for tracking and managing camera tools in the scene
AFRAME.registerSystem("cameras", {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooh, while reading all the rest of the code I was assuming this was the system for the build in aframe camera component (which is also called camera so I am surprised this didn't break everything). We should call this camera-tool, it also then gets automatically bound in camera-tool component as this.system

this.currentCamera = null;
},

getCurrent() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does it mean for a camera to be "current", maybe this should be `getMyCamera"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

haha I called it that originally but had a flashback to Windows 95 and reverted it. I think its better though, you're right.

@@ -88,6 +88,12 @@ AFRAME.registerComponent("camera-tool", {
selfieScreen.scale.set(-2, 2, 2);
this.el.setObject3D("selfieScreen", selfieScreen);

this.cameraSystem = this.el.sceneEl.systems.cameras;

if (this.cameraSystem) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would ditch this defensive if, if the system doesn't exist something bad has happened, and this if would just put us in a weird state where this camera inst registered instead of complaining loudly.

if (track) {
this.trackTarget = el;

this.trackTarget.addEventListener("componentremoved", e => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "correct" way is probably using a MutationObserver but in this case I would probably just check for this.trackTarget && !this.trackTarget.parrentNode in tick.

},

lookAt(el) {
const targetPos = new THREE.Vector3();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are creating a new THREE.Vector3 every tick here, I would rewrite this as:

lookAt: (function() {
    const targetPos = new THREE.Vector3();
    return function(el) {
        this.el.object3D.lookAt(targetPos.setFromMatrixPosition(el.object3D.matrixWorld));
    }
})(),

});

this.onClick = () => {
if (!this.cameraSystem) return;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would get rid of all these defensive checks for camera system existence.

const shouldBeVisible = !!(this.cameraSystem && this.cameraSystem.getCurrent());

if (isVisible !== shouldBeVisible) {
this.el.setAttribute("visible", shouldBeVisible);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would rewrite this to use threejs visibility directly this.el.object3D.visible = shouldBeVisible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
whats new Include this PR on the "What's New" page
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants