Threejs - 使用角度数组围绕目标轴旋转相机

编程问答 2022-05-28

问题描述

我目前正在使用 OrbitControls，这对于鼠标控制来说工作正常。

这是我的要求：

我有一个以弧度表示的角度数组（例如：[0.5,0.6,0]）。这些是 3d 对象必须围绕其自身轴（分别为 x、y、z）旋转的角度。为了与 OrbitControls 保持一致，我试图按照数组中给定的量围绕目标对象的轴旋转/环绕相机，而不是旋转对象本身。

这是我迄今为止尝试过的：

var q = new THREE.Quaternion();
q.setFromAxisAngle(new THREE.Vector3(1,0),-poseAngles[0]);
camera.applyQuaternion(q);
q.setFromAxisAngle(new THREE.Vector3(0,1,-poseAngles[1]);
camera.applyQuaternion(q);
q.setFromAxisAngle(new THREE.Vector3(0,1),-poseAngles[2]);
camera.applyQuaternion(q);

此后，我渲染了场景，但效果不是我想要的。上面的代码围绕自己的轴旋转相机，因此部分目标对象超出了画布。顺便说一句，-ve 符号是向相反方向旋转相机，使其看起来像对象已按需要旋转。

我试过这样设置相机位置：

var sph = (new THREE.Spherical()).setFromVector3(camera.position);
sph.phi -= poseAngles[0];
sph.theta -= poseAngles[1];
sph.makeSafe();
camera.position.setFromSpherical(sph);

但是在这里，我不知道如何适应围绕 z 轴的角度。

我尝试了以上两种的组合，但也不起作用。使用鼠标后，相机会立即重置到原始位置。

我的数学不正确。如何围绕目标轴旋转相机？有人可以帮忙吗？谢谢。 我使用的是 Threejs 修订版 121。

解决方法

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

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

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

coordinate-systemsmaththree.js