Three.js - 在 OrbitControls 和 FirstPersonControls 之间切换

Question

我正在尝试在three.js OrbitControls 和FirstPersonControls 之间来回切换。 Per Mr. Doob's comment on SO 和 DVPassos's example，我已经尝试制作自己的按钮来在两个控件之间切换。

我的 html 有：

<button id="controla" type="button" class="btn btn-default">1st</button>
<button id="controlb" type="button" class="btn btn-default">3rd</button>
<script src="js/OrbitControls.js"></script>
<script src="js/FirstPersonControls.js"></script>

我的three.js javascript有：

$( 'button#controlb' ).addClass( 'active' );

$( 'button#controla' ).click( function() {
    if( !$( 'button#controla' ).hasClass( 'active' ) ){
        $( 'button#controla' ).addClass( 'active' );
        $( 'button#controlb' ).removeClass( 'active' );

        var prevCamera = camera;

        camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
        camera.position.set( 2000, 1500, 2000 );
        camera.lookAt( myTarget.position );
        camera.position.copy( prevCamera.position );
        camera.rotation.copy( prevCamera.rotation );

        controls = new THREE.FirstPersonControls(camera);
    }
});

$( 'button#controlb' ).click( function() {
    if( !$( 'button#controlb' ).hasClass( 'active' ) ){
        $( 'button#controla' ).removeClass( 'active' );
        $( 'button#controlb' ).addClass( 'active' );

        var prevCamera = camera;

        camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
        camera.position.set( 2000, 1500, 2000 );
        camera.lookAt( myTarget.position );
        camera.position.copy( prevCamera.position );
        camera.rotation.copy( prevCamera.rotation );

        controls = new THREE.OrbitControls( camera );
    }
});

当我将其切换为第一人称时，模型消失了。此外，在 IE 控制台中，当我在按下按钮后键入 camera.position 时，我会得到 [object Object] {x: NaN, y: NaN, z: NaN}。

我在这里缺少什么？我需要指定更多控件吗？

Answer 1

它不起作用，因为 FirstPersonControls 需要时钟才能运行。我没有将controls.update();函数传递给如下所示的时钟。

function animate() {
  requestAnimationFrame( animate );
  controls.update( clock.getDelta() );
  update();
  render();
  stats.update();
}