How to switch Three/js camera controls from First Person to Orbit and back

问题

You can switch from Three.js Orbit Controls to FirstPerson controls without a problem. But when you go from First Person to Orbit the display gets stuck in a 'mousedown' mode.

What do you need to do to go back and forth between First Person and Orbit controls seamlessly?

The jsBin with the demo

http://jsbin.com/jekebo/2/edit?html,js,output

The two functions

function setControlsFirstPerson() {

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( -150, 20, 0 );
    controls = new THREE.FirstPersonControls( camera, renderer.domElement );
    controls.lookSpeed = 0.05;
    controls.movementSpeed = 50;

}


function setControlsOrbit() {

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 100, 100, 100 );
    controls = new THREE.OrbitControls( camera, renderer.domElement );

}

Any help appreciated.

回答1:

It is not working because you are sending the second parameter to the OrbitControls. This for some reason seems to stop the end event being fired.

controls = new THREE.OrbitControls( camera, renderer.domElement );

Without out it it seems to work as expected:

controls = new THREE.OrbitControls( camera );

I have gone ahead and edited your jsbin changing the parameters sent to the constructors of both controls.

http://jsbin.com/fabalomave/1/edit?js,output

I also changed how the cameras are created and changed so that a new camera and control instance is not created each time the desired camera is changed, instead it just stores a reference and changes which camera and control that the global camera and controls variables refer to.

来源：https://stackoverflow.com/questions/30206243/how-to-switch-three-js-camera-controls-from-first-person-to-orbit-and-back

标签

javascript

three.js