hook or something, to know when mesh is added to scene

[zyre91]

Hi everyone,

in my project I load multiple meshes with OBJLoader, each after a user interaction. Sometimes the vertices of a mesh's geometry have to be manipulated (to prevent intersections of the meshes). To calculate the needed vertex changes the raycaster is used. Therefore it's essential to know when the recently loaded mesh is actually added to the scene, otherwise the raycasting would fail (the computation takes some time). The loaded meshes are added to the component by using a primitive.
So far the useFrame hook seems to be able to provide a solution, but would make handling the state (is mesh added to scene and manipulation is already done) a bit complex. Do you know a more elegant approach, like an 'added to scene event'?

[drcmda]

in react you know when something has been rendered out via useEffect and useLayoutEffect. the former calls on you after pain (once the view has rendered out on the scree), the latter when the view has been instanciated (as in, it has created the THREE objects), but before paint. useLayoutEffect executes sync and blocks paint until it's done.

if you have distinct components that are async, and something relies on them, then you still use useEffect, because if you switch the renderer to concurrent mode, then everything inside a suspense block will mount at the same time, so useEffect is guaranteed to have access to references that you collect: https://twitter.com/0xca0a/status/1287009226242564096

const Bar = ({ foo }) => {
  // <Bar /> will not run before everything else in the suspense block is resolved.
  // That means <Foo/>, which executes async, is ready by the time we're here.
  // The next frame (useEffect) is guaranteed(!) to access its ref.
  useEffect(() => {
    console.log(foo.current)
  }), [])
  return ...
}

const Foo = React.forwardRef(({ url }, ref) => {
  // This is an async component that takes a while to process
  const scene = useLoader(OBJLoader, url)
  return <primitive ref={ref} object={scene} dispose={null} />
})

const Scene = () => {
  // Bar relies on the asnyc Foo component, but since this component creates a suspense block,
  // blocking execution until all async tasks have been resolved, it can simply rely on the refrence
  const foo = useRef()
  return (
    <Suspense fallback={null}>
      <Foo ref={foo} url="/model.obj" />
      <Bar foo={foo} />
    </Suspense>
  )
}

<Canvas concurrent>
  <Scene />
</Canvas>

[drcmda]

as for raytracing, all objs in r3f have built in raytracing and pointer events. do you really need another raytracer?