add mesh on button click

[aaabb733]

how to add mesh on button click ?
and I don't wanna use useState([new Mesh()]) because setState([...objects, new Mesh()]) is very heavy operation.

[drcmda]

same way you add anything in react. the view is just a reflection of state:

const [items, setItems] = useState([])
useEffect(() => {
  const interval = setIterval(() => setItems(state => [...state, { position: [...], ... }], 1000)
  return () => clearInterval(interval)
}, [])
return items.map((props, i) => (
  <mesh key={i} {...props}>
    <meshBasicMaterial />
    <sphereGeometry />

useState([new Mesh()])

you don't want to do that. you want to put the raw, serializable state that makes the mesh look or behave a certain way into the state model. the component then takes that state and forms a view.

setState([...objects, new Mesh()]) is very heavy operation.

i don't see what makes it expensive, but again, don't.

what is always expensive in three is:

• not re-using materials
• not re-using geometry
• not instancing
• mounting stuff runtime

you can avoid all of this. for instance by creating re-used materials and geometries in global or component space and then doing <mesh material={gold} geometry={sphere} />. the mesh itself is not expensive, unless you have too many, by which point you move to instancing.

[aaabb733]

thank you