Instantiate 3d objects;

[yahia1997ezat]

Hi there,
I'm developing a drag and drop feature for adding furniture to the scene, and I'm started using sphere geometry at the beginning.
my problem is when the mouse is released and the held object is added to the scene an error shows up.
here is the way I add objects to the scene

the error
Uncaught TypeError: Cannot assign to read only property 'boundingSphere' of object '#'
at SphereBufferGeometry.computeBoundingSphere (three.module.js:10301)
at Mesh.raycast (three.module.js:11046)
at intersectObject (three.module.js:46236)
at Raycaster.intersectObjects (three.module.js:46311)

hope you find my question clear

[drcmda]

I don't understand the code. Why do you create a mesh? Simply put the critical data into your state and then map over it in the render function like everyday common react. It looks to me like you are putting three objects into the JSX scene graph.

[yahia1997ezat]

thank you @drcmda
I was mapping furniture into <mesh> which degraded performance since it will recompute every time the parent got rerendered.

what I used to do
{ furnituresInScene && furnituresInScene.map(furn => <mesh position={furn .position} material={new ...} geometry ={new ....}/> ) }
now
{ furnituresInScene && furnituresInScene.map(vox => <Furn position={vox.position} color={vox.color} onClick={OnFurnitureUp} /> ) }

[drcmda]

yeah, never create objects in the render function, see: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#objects-and-properties

normally in react you only store critical data in the store and just distribute it in the view, in your case data is the position, geom and the material. could be an object { position: [x, y, z], material: ..., geometry: ... }. and this you can map over:

return data.map(props => <mesh {...props} key={props.geometry.uuid} />)

with this you can also re-use materials and geometry given that two items share a certain material or geometry.