0

我正在使用带有 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;
4

0 回答 0