Three.js |围绕场景旋转相机-四元数和可能云台锁定

编程问答 2022-08-13

问题描述

我正在使用three.js中的范围滑块围绕场景的x和y轴旋转相机，但遇到无法解决的问题。 Y轴的工作原理像一个超级按钮，但是当在X轴上旋转时，会出现奇怪的行为，这是由万向节锁定引起的。为了摆脱这种情况，我正在尝试实现四元数（在this answer之后），但这并没有真正的帮助。我尝试过的事情：

  • 使用球坐标。问题仍然存在。
//Code implement spherical coordinates rotation for X axis. Y axis is similar,//but with controls.getAzimuthAngle() as third argument and X slider value as second
sphericalCoords = new THREE.Spherical(radius,controls.getPolarangle(),yRotSlider.value)
camera.position.setFromSpherical(sphericalCoords);
camera.lookAt(scene.position);

  • 枢轴点。效果很好，但是我希望滑块与OrbitControls一起使用缩放滑块（下面是小提琴）的工作方式-用鼠标旋转后更改其值，所以我不想使用枢轴点，因为它不会影响控件。getPolar / AzimuthAngle（ ）。

  • 以这种方式将旋转应用于相机矩阵：

camera.applyMatrix4(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3( 1,0 ).normalize(),angle) );

，但没有成功。 更重要的是，该应用必须与OrbitControls配合使用，但是当通过滑块旋转相机时，使用OrbitControls进行操作会随机进行。代码段很可能包含错误：

//angle in X before rotating
xCurrentAngle = controls.getPolarangle();

//angle set by user in slider
xAngletoGet = xRotSlider.value;

//angle between those values
diffX = Math.abs(xAngletoGet - xCurrentAngle);

//check direction of rotation
(xAngletoGet < xCurrentAngle) ? diffX = -diffX: diffX;

//trying to rotate camera by applying quaternion
//in Y axis works well
camera.position.applyQuaternion(new THREE.Quaternion().setFromAxisAngle(
    new THREE.Vector3(1,0).normalize(),diffX
));
camera.up.applyQuaternion(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,diffX));

controls.update();
camera.lookAt(scene.position);

完整的代码可以在下面的小提琴中访问。 希望有人能帮助我，我已经在这个问题上苦苦挣扎了一段时间。在此先感谢您的帮助！ ? https://jsfiddle.net/marcin96/0ujm4rpf/4/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cameracamerajavascriptquaternionsrotationthree.js