Search code examples
javascriptthree.jsgame-development

Overlap same scene on the side of existing main scene

I have some robots running in my game scene. Now I want to switch the camera to the robot's first person view and show it in a small window on the side on top of the existing scene. I have tried using multiple renderers. I have been looking everywhere for it but so far quite unsuccessful.

P.S. For some reason renderer.setViewPort(0,0,15,20) doesn't seem to be working.

Solution

  • Found the fiddle to answer my question: https://jsfiddle.net/qwb39spx/

        //inset scene
    renderer.clearDepth(); // important!
    renderer.setScissorTest(true);
    renderer.setScissor(20, 20, insetWidth, insetHeight);
    renderer.setViewport(20, 20, insetWidth, insetHeight);
    renderer.setClearColor( 0x222222, 1 );

    camera2.position.copy(camera.position.clone().normalize().multiplyScalar(distance));
    camera2.quaternion.copy(camera.quaternion);

    renderer.render(scene, camera2);