切换threejs控件（从TrackBall到FlyControls，反之亦然） [英] Switch threejs controls ( from TrackBall to FlyControls and vice versa)

问题描述

我想要实现的是拥有两种控制模式，一种是免费的飞行控制模式，另一种是以物体为中心的控制模式（轨迹球），按下按钮可以在它们之间无缝切换。

What I am trying to achieve is to have two control modes, a free "flying" one, and an object-centered one (trackball) and with a button press seamlessly switch between them.

我最初尝试使用TrackBallControls和FlyControls。这两个问题是，TrackballControls基于欧拉角，而FlyControls则基于Quartenions。我尝试通过执行将camera.rotation向量转换为四元数，

I initially tried with TrackBallControls and FlyControls. The problem with those two, is that TrackballControls is based on Euler angles, while FlyControls is based on Quartenions. I tried converting the camera.rotation vector to a quaternion by doing,

quaternion.setFromEuler( target ); //where target, a Vector3 that contains degrees

手动设置位置（因为它们使用相同的位置）位置对象），虽然它似乎工作，但稍微旋转相机 - 并切换控制，开始产生可怕的错误结果。此外，从四元数（setEulerFromQuaternion）中获取欧拉角会导致错误的数据。

And setting the position manually (since they use the same position object), and while it seemed to be working, rotating the camera a bit - and switching controls, started yielding horribly wrong results. Also, grabbing Euler angles from the quaternion (setEulerFromQuaternion) resulted in wrong data.

因此，虽然我能够在它们之间切换，但我始终无法同步它们的旋转坐标，所以在开关上，而相机位置正确，旋转错误。

So, while I was able to switch between them, I was never able to sync their rotation coordinates, so "on switch" while the camera position is correct the rotation is wrong.

PS。我使用FirstPersonControls（euler角度）得到了一些结果，但屏幕lat，它使用的长方法非常容易出错，并且在Z轴旋转时完全失败。

PS. I had some results with the FirstPersonControls (euler angles as well) but the screen lat,long method it is using is very error prone and fails completely when there is Z axis rotation.

推荐答案

这样的事情怎么样？

function onClick() {

    var prevCamera = camera;

    camera = new THREE.PerspectiveCamera(...);
    camera.position.copy( prevCamera.position );
    camera.rotation.copy( prevCamera.rotation );

    var MODE = { TRACKBALL: 0, FLY: 1 };

    switch( mode ) {

        case MODE.FLY:

            controls = new THREE.TrackballControls( camera );

            mode = MODE.TRACKBALL;

            break;

        case MODE.TRACKBALL:

            controls = new THREE.FlyControls( camera );

            mode = MODE.FLY;

            break;

    }

}

这篇关于切换threejs控件（从TrackBall到FlyControls，反之亦然）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！