react-three-fiber - 如何获取 OrbitControls 参考

Question

我正在尝试访问 OrbitControls ref，如下所示：

const controlsRef = useRef<any>();

  return (
    <>
      <Canvas
        camera={{
          position: [0, 0, 100],
          up: [0, 0, 1],
        }}
      >
        <OrbitControls makeDefault ref={controlsRef} />
        <ambientLight />
        <FakeSphere position={[0, 0, 0]} color="red" />
        <FakeSphere position={[100, 100, 0]} color="blue" />
        <Nav controls={controlsRef.current} />
      </Canvas>
    </>
  );

代码： https ://codesandbox.io/s/cool-flower-f5qr0?file=/src/App.tsx:949-962

ref 未定义。请问有什么想法吗？

Answer 1

找到了提示呵呵（https://github.com/pmndrs/drei/issues/718）。无法从 Canvas 外部获取参考。

现在，在 OrbitControls 上添加一个包装器来捕获 ref。不确定是否有更好的解决方案。

const MyControls = (props: any) => {
  const { setControls } = props;
  const ref = useRef<any>();

  useEffect(() => {
    if (!ref.current) return;
    setControls(ref.current);
  }, ref.current);
  return <OrbitControls makeDefault ref={ref} />;
};