旋转相机时更新OrbitControls旋转

Question

我使用@react-three/fiber，实现了第一人称控件（WASD和光标键），并添加了OrbitControls来导航场景。我几乎是在克隆指针锁控件我已经让它在WASD控件中起作用（更新目标OrbitControls的向量，作为ref传递）：

const moveForward=（距离）=>{vec.setFromMatrixColumn（摄像机矩阵，0）vec.crossVectors（摄像机向上，vec）camera.position.addScaledVector（vec，距离）orbitControls.current.target.addScaledVector（向量，距离）}const moveRight=（距离）=>{vec.setFromMatrixColumn（摄像机矩阵，0）camera.position.addScaledVector（vec，距离）orbitControls.current.target.addScaledVector（向量，距离）}

但是，我不太确定如何更新目标当相机旋转时。下面是我如何旋转相机，并且在没有OrbitControls的情况下它可以正常工作：

const-euler=新三个。欧拉（0,0,0，‘YXZ’）；euler.setFromQuaternion（camera.quaternion）euler.y-=0.25*弧度；camera.quaternion.setFromEuler（euler）

在此处预览：https://codesandbox.io/s/wasd-with-orbit-9edup7

Answer 1

好的，您可以在这里看到工作版本：https://yvod70.csb.app/

想法很简单，将相机连接到播放器/盒子上，然后移动所述对象而不是相机。作为玩家子级的摄影机将相对于玩家进行平移和旋转。

为此，第一步是获取网格的引用：

常量场景=（）=>{const网格=useRef（）；返回(<画布><网格ref={网格}><boxBufferGeometry参数={[1，1，1]}/><meshBasicMaterial线框颜色={“green”}/></网格>＜控制网格＝｛网格｝/＞</画布>);}

设置好后，我们只需将网格引用传递给我们想要的任何React组件，然后使用它。在我们的例子中，是为了移动而更换摄像头，并将摄像头连接到盒子上。在您的控制组件：

const控件=（{orbitControls，mesh}）=>{/**@类型{THREE.Mesh}*/常量框=网格电流；const｛camera｝=useThree（）；常量代码=useCodes（）；// ...你的动作代码在这里，记住把相机换成盒子。//修复：将Controls组件向下移动组件树，这样我们就不会出现这些竞争条件。if（！！框）{框。添加（相机）；}// ...动画代码}

这些是我将轨道控制装置连接到玩家上所采取的步骤