CODEWITHSUNDEEP
javascriptthree.jscamera
Loizos Vasileiou
Loizos Vasileiou

Reputation: 704

How to add different camera using orbit controls?

What I have:

Notice that there are two cameras here (one is shown in the 3D space and the other one is recording that specific space). I use the code below to create the first/second camera and the orbit controls.

enter image description here

//Add First THREE Camera
camera_Main = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera_Main.position.set(-2000, 500, 500); //Set camera position
camera_Main_declared = true; //Checks if camera is declared for animate() function

orbitController_Main = new THREE.OrbitControls(camera_Main, renderer_Main.domElement);
orbitController.maxPolarAngle = Math.PI / 2;  
orbitController.enablePan = false;
orbitController.maxDistance = 2800;
orbitController.minDistance = 400;
orbitController.saveState();

//Create Second Camera
camera_RT = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, -100, -500);
var helper = new THREE.CameraHelper( camera_RT );
scene_Main.add( helper );

The issue:

What I'm trying to do is to set a different camera for the orbit controller so that when I call:

orbitController.?????????? // Set camera_RT as default
orbitController.reset(); //Reset camera_RT orbit controls

it would reset the orbit controls of camera_RT and not camera_Main.

Upvotes: 0

Views: 132

Answers (1)

M -
M -

Reputation: 28502

The simplest way to alternate control between two cameras is to just declare two separate OrbitControls(), then enable/disable them as needed:

var oControl_Main = new THREE.OrbitControls(camera_Main, renderer_Main.domElement);
var oControl_RT = new THREE.OrbitControls(camera_RT, renderer_Main.domElement);

// Only main camera is enabled
function enableMain() {
    oControl_Main.enabled = true;
    oControl_RT.enabled = false;
}

// Swap control to RT camera
function enableRT() {
    oControl_Main.enabled = false;
    oControl_RT.enabled = true;
}

A more involved way to swap control is to copy the source code of OrbitControls.js so you can edit it, and add a method that changes the camera that this.object = object refers to. However, you might also need to worry about swapping the two different states with all their rotations and positions, which could get complicated.

Upvotes: 1

Related Questions