如何从三反应纤维的画布中获取所有 Object3D



我正在使用react three-fiber开发我的第一个应用程序。我目前生成的Viewport如下:


const Viewport = (props) => {
return (
<Canvas
onCreated={({ gl, raycaster }) => {
gl.setClearColor("darkgrey");
props.setraycaster(raycaster);
}}
>
{/* Canvas Config */}
<CameraControls />
<ambientLight intensity={0.5} />
{/* Objects */}
{props.scene.objects.map((o, i) => (
<Suspense fallback={<LoadingBox />} key={i}>
<Element3D obj={o} displaymode={props.displaymode} key={i} />
</Suspense>
))}
</Canvas>
);
};

正如你所看到的,我正在为道具中的Viewport中应该显示的内容建立一个模型,然后将它们显示为画布中的Element3D组件
我还想在应用程序的另一部分中进行光线投射,以检查对象之间的遮挡。为此,我需要告诉光线投射器它应该考虑的所有对象。因此,我需要一个最终出现在画布上的所有Object3D的列表。我的问题是如何得到这样一份清单。

如果你需要知道,这是Element3D组件的重要部分:

const scene = useLoader(OBJLoader, props.obj.meshPath);
return (
<primitive object={scene.children[0]}>
{
<meshBasicMaterial
attach="material"
transparent
side={THREE.DoubleSide}
>
<primitive attach="map" object={texture} />
</meshBasicMaterial>
}
</primitive>
)

我将在这里回答我自己的问题,说Canvas具有属性scene,该属性属于scene类型,继承自Object3D。所以,我只是修改了视口的onCreated,以将场景传递给


const Viewport = (props) => {
return (
<Canvas
onCreated={({ gl, raycaster, scene }) => {
gl.setClearColor("darkgrey");
props.setRaycaster(raycaster);
props.setScene3(scene)
}}
>
{/* Canvas Config */}
<CameraControls />
<ambientLight intensity={0.5} />
{/* Objects */}
{props.scene.objects.map((o, i) => (
<Suspense fallback={<LoadingBox />} key={i}>
<Element3D obj={o} displaymode={props.displaymode} key={i} />
</Suspense>
))}
</Canvas>
);
};

我可以将该场景传递给光线跟踪器,瞧,它会考虑Viewport中的所有对象。