围绕垂直于相机的枢轴点进行计算旋转(类似于 TransformControls,但始终指向相机)

Calc rotation around pivot point perpendicularly to camera (like TransformControls but always directed to the camera)

提问人:DonkeyLuck0 提问时间:11/15/2023 最后编辑:DonkeyLuck0 更新时间:11/16/2023 访问量:41

问:

我一直在尝试在鼠标移动时从当前相机视图计算变换旋转。类似于 Three.js 中的“TransformControls”组件,但控件应始终指向相机。从这个角度来看,我想计算旋转,然后应用为纹理旋转。

以下是我尝试过的步骤:

  1. 单击网格以找到 3D 枢轴点,该枢轴点将是未来纹理的中心
  2. 在 3D 枢轴点处设置相交平面的位置(用于光线投射目的),并使用 使其定向相机。lookAt(camera)
  3. 拖动鼠标和平面以计算围绕枢轴点的旋转

下面是演示我的设置的屏幕截图:Here's a screenshot illustrating my setup:

但是,我面临的问题是,只有当相机朝向特定角度向下看时,旋转才能正常工作。当相机抬头时,旋转似乎是反转的,而在其他角度,行为不一致,就好像它没有与其投影轴对齐一样。

我还创建了一个 CodeSandbox 示例来演示该问题: https://codesandbox.io/s/rotation-438sgd?file=/src/App.js

注意:对我来说,关键部分是从相机角度计算垂直于飞机视图的 2D 角度。

提前感谢您的帮助!

javascript reactjs three.js react-three-fiber

评论


答: 暂无答案