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 );
    }
});

当我将其切换到第一人称时，模型会消失。此外，在按下按钮后输入camera.position时，在IE控制台中，我得到[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();
}

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

1 个答案: