THREE.js: two scenes with the same camera positions

Question

I'm adding two scenes on top of each other, the scene on top can be faded out and in with a slider. You can also turn the objects with the mouse to get an overview.

I want the camera position to be the same for both scenes. Right now I turn around scene1, afterwards I fade in scene2 which is at the starting position and not at the same position like scene1

I use the same camera for both scenes:

function init() {
    ...
        scene.add(threeCam);
        scene2.add(threeCam);
}

function animate(time) {

const delta = clock.getDelta();

if($('#three-viewer2 canvas').css('opacity') == 0) {
        if (renderAlpha < 255) cameraControls.update(delta);
}
if($('#three-viewer2 canvas').css('opacity') > 0) {
        if (renderAlpha < 255) cameraControls2.update(delta);
}
}

Is there a way to update the position of the camera in scene2 automatically?

Mugen87 Mugen87 · Accepted Answer · 2019-02-13T11:37:46

Well, it's not valid to add a 3D object to two different parents. I suggest you set camera.matrixAutoUpdate to false and update the world matrix of the camera manually before rendering a scene.

THREE.js: two scenes with the same camera positions

1 Answers