Three.js

Question

我正在尝试在 three.js OrbitControls 和 FirstPersonControls 之间来回切换。 Per Mr. Doob's comment on SO and 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();
}

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

Three.js - toggle between OrbitControls and FirstPersonControls

javascript

jquery