控制更改期间的React状态更新将OrbitControls从三个中断

Question

我使用react three和drei orbitControls，并在移动相机时尝试检测相机是在零度以上还是在零度以下。目前，我正在使用onEnd监听器来触发ParentComponent中的代码。如果我像这样更改父组件的状态，那么一切都会按预期进行。不幸的是，如果我在结束另一次之前开始另一次轨道控制的更改，并更改我父母的状态，轨道控制将中断。例如，我旋转相机并按住鼠标左键，然后用相机和鼠标滚轮同时滚动到零度以下，Orbit控件不再工作。这在使用触摸时尤其痛苦。只要我的第二根手指碰到地面，轨道控制就断了。

这是我的控制组件：

const Controls = forwardRef(({ handleCamera }, ref) => {
const { gl, camera } = useThree();
const controls = useRef(null);
useImperativeHandle(ref, () => ({
getCamera() {
return camera
},
}))
const handleChange = (e) => {
handleCamera(camera); 
}
return (
<OrbitControls ref={controls}
onEnd={(e) => handleChange(e)}
/>
);
});
export default Controls;

这是我的父母：

function App() {  
const handleCamera = (camera) => {
setCameraBelowSurface(camera.position.y <= 0 ? true : false);
};
return
<Canvas >
<Suspense>
<Controls
ref={controlsRef}
handleCamera={handleCamera}
/>          
</Suspense>
</Canvas>    
}
export default App;

Answer 1

我遇到了同样的问题，幸运的是我找到了这个问题的解决方案。我希望这对某人有帮助。

首先，当您使用状态变量并更改其值时，组件将重新渲染，从而导致此问题。因此，你只需要使用参考，而不是状态变量

const isDragging = React.useRef(false);

在"onStart"one_answers"onEnd"事件中设置ref的当前属性：

<OrbitControls
onStart={() => {
isDragging.current = true;
}}
onEnd={() => {
isDragging.current = false;
}}
autoRotate={false}
autoRotateSpeed={0.4}
/>