Three.js Orbit Controls with Two (Toggled) Cameras

Question

I have two cameras in one scene and one viewport and one renderer. I toggle (using html buttons) between cameras.

THE PROBLEMS

Problem 1

For camera1 there is no response from moving the mouse. When I toggle to camera2 the orbit control works fine. Toggling back to camera1 there is still no response from moving the mouse.

jsfiddle v1 Original (no response from camera1) jsfiddle.net/steveow/xu0k1z75/

UPDATE: Problem 1, Fixed by Stallion - avoid setting camera position to (0,0,0).

Problem 2

For camera1 there remains a problem that Pan and Dolly are very slow, at least initially. They may speed up later (after panning & dollying with camera2) but are then very fast.

jsfiddle: v2 camera1 Pan & Dolly is very slow, at least initially, maybe excessive later. http://jsfiddle.net/steveow/uk94hxrp/

UPDATE: Pan & Dolly "slowness" is because camera is very close to the OrbitControls.target position (which defaults to (0,0,0)). So if I choose a different .target position the "slowness" can be avoided.

NOTES

I am currently creating a new THREE.OrbitControls object whenever I switch cameras. But previously I have tried creating two persistent THREE.OrbitControls objects during initialisation and then assigning a general variable called "controls" to whichever one is supposed to be active. I have tried setting the orbitControls to an html div "container" rather than the renderer.domElement. I have tried including controls.update() in the animation loop.

I did have it working with either camera some time ago but I cannot get back to that.

I have looked at the OrbitControls code but am none-the-wiser.

CODE (as for original Problem, Problem 1 but since modified slightly.).

Here is the camera initiation code:-

//... camera1

    camera1Fov = 75;
    camera1Far = 1200;
    camera1 = new THREE.PerspectiveCamera( camera1Fov, window.innerWidth / window.innerHeight, 1, camera1Far );
    //camera1.position.z = camera1Far;
    camera1.position.set(0,0,0);


    scene.add(camera1);
    camera1.name = "Camera_1";

    var sGeo        = new THREE.SphereGeometry( 40,8,8);
    var sMaterial   = new THREE.MeshPhongMaterial( { color: 0xff00ff } );
    Cam1Target      = new THREE.Mesh(sGeo, sMaterial);
    Cam1Target.position.set(0,0,-200);
    scene.add(Cam1Target);

    controls1 = new THREE.OrbitControls(camera1, renderer.domElement);
    controls = controls1;//... initially.
    camera1.lookAt( Cam1Target );
    RenderCamera = camera1;

    camera1_Helper = new THREE.CameraHelper( camera1 );
    camera1_Helper.update();
    scene.add (camera1_Helper);

// camera2
    camera2 = new THREE.PerspectiveCamera( cameraFOV, window.innerWidth / window.innerHeight, 1, 20000 );
    c2PosX =  5500;
    c2PosY =  3500;
    c2PosZ = -10000;

    camera2.position.set( c2PosX, c2PosY, c2PosZ );
    scene.add(camera2);
    camera2.name = "Camera_2";    
    //controls2 = new THREE.OrbitControls(camera2, renderer.domElement);
    //camera2.lookAt(camera1);

Here is the animation and camera switching and camera resetting code:-

//----------------------------------------------------------------
function F_frame()
{
   //... Render
   af = requestAnimationFrame(F_frame);

   controls.update(); 

   renderer.render(scene, RenderCamera);


   tick+=0.001;

}//... EOF Frame().

//-------------------------------------------------------------
function F_Switch_Camera() 
{
    var SelectedCameraString = document.getElementById('myTextField').value;
    //...toggle
    if (SelectedCameraString == "camera1") 
    {
        SelectedCameraString = "camera2";
        RenderCamera = camera2;
        controls = new THREE.OrbitControls(camera2, container);//renderer.domElement);
        //controls.object = camera2;
        //controls.update();
        //controls = controls2;
    } else {
        SelectedCameraString = "camera1";
        RenderCamera = camera1;
        controls = new THREE.OrbitControls(camera1, container);//renderer.domElement);
        //controls.object = camera1;
        //controls.update();
        //controls = controls1;     
    }
    document.getElementById('myTextField').value = SelectedCameraString;
}       
//----------------------------------------------------------------------
function F_Reset_Camera1()
{
    camera1.position.set(0,0,0);
    camera1.lookAt ( Cam1Target );
}
//----------------------------------------------------------------------
function F_Reset_Camera2()
{
    camera2.position.set( c2PosX, c2PosY, c2PosZ );
    camera2.lookAt ( camera1 );
}

UPDATE

Many thanks to user Stallion for the simple fix - don't set camera world position to (0,0,0) use (0,0,1) instead.

Ajit kohir Ajit kohir · Accepted Answer · 2016-03-26T21:21:32

There is quick fix:

set camera1 position to

camera1.position.set(0,0,1);

check the fiddle http://jsfiddle.net/Stallion33/sgcfu4tt/

Three.js Orbit Controls with Two (Toggled) Cameras

1 Answers