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

Question

我正在使用 react-three-fiber 开发我的第一个应用程序。我目前像这样生成视口：

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>
  );
};

如您所见，我正在对应该在道具的视口中显示的内容进行建模，然后将它们显示为画布中的 Element3D 组件。
我还想在我的应用程序的另一部分进行光线投射，以检查对象之间的遮挡。为此，我需要告诉光线投射器它应该考虑的所有对象。 所以，我需要一个最终出现在我的 Canvas 上的所有 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>
)

Answer 1

在这里回答我自己的问题是说 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>
  );
};

我可以将该场景传递给我的光线追踪器，瞧，它会考虑视口中的所有对象。