Camera in video starts pointed to left even after adjustments to camera.position

[sjcobb]

Hi, is there a certain order I should be adding the CCapture capture code, I can't get my changes to camera.position to have an effect once the video is processed, it always starts pointing to the left of the intended target.

Thanks!

[imgntn]

Heya -- @sjcobb! It's been a while since I've tinkered with this code but I took a look last night and wanted to update you.

I will update the docs but this is a failing on my part to clearly explain how things work, more than a technical problem.

Assuming you're running index.html

• The camera that you're looking at in the scene is not ultimately the one that is captured
• The position of a global variable called camera is copied into the managed cubecamera's position around line 195 of CubemapToEquirectangular.js - sorry so sloppy with the globals, I will make that a parameter that you pass to the manager
• An equirectangular camera is used for capture so it doesn't matter where it's looking - if you open the image in a 360 photo viewer, or stitch them together into a video and add the appropriate metadata, you'll see that you can just move your view around at will. It can be a bit deceiving if you just look at a static image - that's why it feels like you're only looking "to the left". We capture the whole view around the camera position in 360 degrees. That's what allows you to move around inside of the YouTube video :)
• If you add a bit of code to your animation loop to change the camera's position, w/ something like the cameraPositionCount I added below, you'll see that the position does indeed update in the rendered images.

var cameraPositionCount=-5;
function animate(delta) {

    requestAnimationFrame(animate);
    cameraPositionCount++;
    camera.position.x=cameraPositionCount/4;

    meshes.forEach(function(mesh) {
        // mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.003;
    })
    controls.update(delta);
    console.log('camera.position.x',camera,camera.position.x);
    renderer.render(scene, camera);
    capturer360.capture(canvas);

}

Hope that all helps, and I'll try to make things easier and more clear soon.

Best,
@imgntn

[sjcobb]

Thanks @imgntn !
I appreciate the explanation and adding a parameter to pass the camera to the manager would be great. I was able to adjust the camera slightly and almost got it to point directly to the fire as intended, here is the code and resulting YouTube video:
https://www.youtube.com/watch?v=5ntBNHxNHV0
https://github.com/sjcobb/fire-temple/blob/master/camp/js/camp-scene.js

My issue is really in the video editing realm, not with this project. I found a few tutorials to help in the future (uses 'offset effect') and I may need to invest in decent editor software.

Anyways, if you'd like, I would love to help with this project. I think it has a lot of potential for helping JS devs to gain a wider audience for their work, I know I'm planning to use it often to show some of my CodePen demos on YouTube.

[imgntn]

There's a feature on Facebook to set the start view for 360 photos (& videos?) .

Too bad nothing similar for YouTube

I don't think I'm copying the camera rotation into the cubeCamera the same way that I am with the position; I wonder if that's why changes to the rotation aren't sticking for you. I hadn't thought that people might want "front" to be a different direction than what it defaults to.

I'd be happy to have some help with this; it was a cool feature to add to three.js but a bit of a hack in some ways :) Agree that it gives folks a chance to showcase their sketches where people will actually see them - on social media. At least until we can embed webGL scenes on the timeline / YouTube directly!

Let me know what you think could be improved and I'll try to get back up to speed on what exactly I did previously :)