如何获取React Three Fiber中Scene对象的引用？

Question

我正在尝试弄清楚如何在 React Three Fiber 中以编程方式获取

scene

对象，以便我可以以传统方式添加三个组件：

scene.add(myThing)

。我尝试过将

const canvasRef = useRef()

与

<Canvas ref={canvasRef} />

一起使用，但在传递给另一个组件时，引用似乎未定义。

我知道这可能是非常糟糕的做法，但我想做的是 将其转换为在 React Three Fiber 中使用，但是 Geometry

 已被 

BufferGeometry

 取代，我有点迷失了。 

我找到了这个，但正如前面提到的，我现在只是尝试使用 scene.add()

，直到我能更多地了解 Three 的内部工作原理。

感谢您的帮助。

Answer 1

您可以使用React Three Fiber提供的

useThree

。

https://docs.pmnd.rs/react- Three-Fiber/api/hooks

Answer 2

我在我的一个项目中遇到了同样的问题，我使用 Three.js 和三个光纤来解决这个问题：

import { useThree } from "@react-three/fiber"
import { BoxGeometry, Mesh, MeshStandardMaterial } from "three";

  const { scene } = useThree()

  const addThreeComponent = () => {
    const geometry = new BoxGeometry(100, 10, 100);
    const material = new MeshStandardMaterial({ color: 0x00ff00 });
    const newBox = new Mesh(geometry, material);
    newBox.position.set(0, 10, 0);
    scene.add(newBox);
  }

Answer 3

最终自己实现了

forwardRef

。

const MyCanvasRef = forwardRef(props, ref) => {
   const { scene, camera } = useThree();
   useImperativeHandle(ref, () => ({
      scene,
      camera,
   }), [scene, camera]);
}

export const MyCanvas = forwardRef(({ children }, ref) => {
   return (
      <Canvas>
         <MyCanvasRef ref={ref} />
         { children }
      </Canvas>
   );
}

用途：

const ref = useRef();
<MyCanvas ref={ref}>
   ...
</MyCanvas />