我正试图弄清楚如何在React Three Fiber中以编程方式获得scene
对象,以便我可以以传统方式添加三个组件:scene.add(myThing)
。我已经尝试使用const canvasRef = useRef()
与<Canvas ref={canvasRef} />
,但ref似乎是传递到另一个组件时未定义。
我知道这可能是非常糟糕的做法,但我要做的是将其转换为在React三光纤中使用,但Geometry
已被BufferGeometry
取代,我有点迷路。我发现了这一点,但如前所述,我现在只是试图使用scene.add()
,直到我能弄清楚更多关于Three的内部工作原理。
谢谢你的帮助。
您可以使用React Three Fiber提供的useThree
。
https://docs.pmnd.rs/react-three-fiber/api/hooks
我在我的一个项目中遇到了同样的问题,我使用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);
}
最终我自己实现了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 />