如何将三/js 相机控件从第一人称切换到 Orbit 并返回 [英] How to switch Three/js camera controls from First Person to Orbit and back

问题描述

您可以毫无问题地从 Three.js Orbit Controls 切换到 FirstPerson 控件.但是，当您从 First Person 转到 Orbit 时，显示屏会卡在鼠标按下"模式.

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?

带有演示的 jsBin

The jsBin with the demo

http://jsbin.com/jekebo/2/edit?html,js，输出

两个函数

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

}

感谢任何帮助.

推荐答案

它不起作用，因为您将第二个参数发送到 OrbitControls.出于某种原因，这似乎阻止了结束事件被触发.

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

我已经编辑了您的 jsbin，更改了发送到两个控件的构造函数的参数.

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

我还更改了相机的创建和更改方式，以便每次更改所需的相机时都不会创建新的相机和控制实例，而是仅存储参考并更改哪个相机并控制全局 camera 和 controls 变量引用.

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.

这篇关于如何将三/js 相机控件从第一人称切换到 Orbit 并返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！