Add and remove a 3d element from canvas at runtime

[PaganViking]

Is it even possible to add and remove a 3d element from canvas at runtime ?

[dangrabcad]

Yes, the same way you can add and remove DOM elements from your React page at runtime. Just either include or don't include the element in the tree depending on what props your component receives

[PaganViking]

Thanks, do you have an example ?
The only one i have seen is this one:
https://react-three-fiber-website-playground.now.sh/
But it doesn't show the code on how do insert.
Thanks upfront.

[drcmda]

this is just regular react

function Foo() {
  const [visible, set] = useState(true)
  useEffect(() => void setInterval(() => set(visible => !visible), 1000), [])
  return (
    <group>
      {visible && (
        <mesh>
          <boxBufferGeometry />
          <meshBasicMaterial color="hotpink" />
        </mesh>
      )}
    </group>
  )
}

...

<Foo />

i would suggest you go through a quick react course (with hooks!) somewhere. that will make it all easier. you cant be guessing your way through this, it'll just be painful.

[PaganViking]

I understand that, but how do i add or remove <Foo /> from the render ?

[JustFly1984]

function Bar() {
  const [visible, set] = useState(true)
  useEffect(() => void setInterval(() => set(visible => !visible), 1000), [])
  return (
    <>
      {visible && (
        <Foo />
      )}
    </>
  )
}

[PaganViking]

Thanks I got it :-)