Update event when the scene's nodes have changed

[promontis]

I would like to build the same feature that the Three Editor (https://threejs.org/editor/) has on the Scene tab, namely being able to iterate/view all the elements in the scene (the tree of meshes).

I've tried doing the following:

const [theCanvas, setCanvas] = useState<CanvasContext>();
 <Canvas onCreated={(canvas) => setCanvas(canvas)}>

Now I have the Canvas object and I can inspect the scene, and following the children for each node. However, onCreated is only called once. Is there some event that is triggered when the scene's node have changed, so that I can update the 'scene outline'? Note that I'm created the scene outline outside the Canvas.

[drcmda]

wait, onCreated gives you the state model, of which scene is a property. threejs afaik does not have any means to detect changes which is sad. but you're in react and changes always come unidirectionally top down, so you know when something changes, because nothing can unless you change a prop.

btw react devtools have that feature, see it flashing? https://twitter.com/0xca0a/status/1135583842683838464

[promontis]

Ah so cool that react devtools does that!

I think your answer helps me a lot! I do know that content has changed from the unidirectional flow. There is only one thing that I can't get a grasp on and that is that I'm using useLoader to load glTF assets and that loader updates ThreeJS outside of React, right?

As in, currently I'm doing this:

<Suspense fallback={<Box position={[-1.2, 0, 0]} />}>
   <Gltf position={[-1.2, 0, 0]} />
</Suspense>

Without the suspense it doesn't work. With the suspense it works, but for the CanvasContext state it currently shows the scene as only having the <Box />, not the <Gltf /> with all its sub-nodes.

How does that work in regard to my original question?

[drcmda]

Suspended components are async, they are not part of the tree until they have completed loading. You wont find your async models in the scene because the browser is still fetching assets. You know when your objects are ready though, either in useEffect inside the model that loads:

function Model() {
  const { scene } = useLoader(...)
  useEffect(() => console.log("im part of the scene now"), [])

Or, you could piggyback on the suspense fallback, then you can know when all async components are done. In this case you use the unmount function in useEffect, because suspense will unmount its fallback when everything is done.

function Notify() {
  useEffect(() => () => console.log("all models are in the scene now"), [])
  return null
}

<Canvas concurrent>
  <Suspense fallback={<Notify />}>
    ...

Well, thinking of it, you could also do this, since all async components will come up at the same time:

function Notify() {
  useEffect(() => console.log("all models are in the scene now"), [])
  return null
}

<Canvas concurrent>
  <Suspense fallback={null}>
    <Notify />

[promontis]

@drcmda is this an ok pattern?

interface NotifyProps {
    setId: React.Dispatch<React.SetStateAction<string>>;
}

function Notify(props: NotifyProps) {
    useEffect(() => {
        props.setId(uuidv4());
        console.log("all models are in the scene now");
    }, [])

    return null
}

const [canvas, setCanvas] = useState<CanvasContext>();
const [id, setId] = useState<string>('');

// do something with canvas

return (
    <StyledCanvas onCreated={(c) => setCanvas(c)} concurrent={true}>
        <Controls />
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Suspense fallback={null}>
            <Notify setId={setId} />
            <Gltf path="/models/DamagedHelmet.gltf" />
        </Suspense>
    </StyledCanvas>
);

[promontis]

Just wanted to add not to oversee the concurrent attribute on the Canvas like I did :)