我如何在React三光纤中获得对场景对象的引用?

Question

我正试图弄清楚如何在React Three Fiber中以编程方式获得scene对象，以便我可以以传统方式添加三个组件:scene.add(myThing)。我已经尝试使用const canvasRef = useRef()与<Canvas ref={canvasRef} />，但ref似乎是传递到另一个组件时未定义。

我知道这可能是非常糟糕的做法，但我要做的是将其转换为在React三光纤中使用，但Geometry已被BufferGeometry取代，我有点迷路。我发现了这一点，但如前所述，我现在只是试图使用scene.add()，直到我能弄清楚更多关于Three的内部工作原理。

谢谢你的帮助。

Answer 1

您可以使用React Three Fiber提供的useThree。

https://docs.pmnd.rs/react-three-fiber/api/hooks

Answer 2

我在我的一个项目中遇到了同样的问题，我使用three .js和three fiber来解决这个问题:

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 ThreeForwardRef = forwardRef(props, ref) => {
const { scene, camera } = useThree();
useImperativeHandle(ref, () => ({
scene,
camera,
}), [scene, camera]);
}
export const MyCanvas = forwardRef(({ children }, ref) => {
return (
<Canvas>
<ThreeForwardRef ref={ref} />
{ children }
</Canvas>
);
}

用法:

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