R3F Load Array of Objects to Add to scene

Questions
,
1

Using R3F and looking to build an Array of different GLTF objects then clone/add these into the scene. Any help is much appreciated!

Based on a global state eg. [20,50,60] I would like to add the GLTF models that represent 20, 50, 60 to the scene. As this array updates I would like the models to update to reflect the change. eg now [30,50,50].

Build an Array of objects with parameters eg. The model and position will be variable.

<Clone object={ model1.scene } rotation-y={ Math.PI/2}  scale={ 2 } position={[0,0,-2]}/>
<Clone object={ model2.scene } rotation-y={ Math.PI/2}  scale={ 2 } position={[0,0,-5]}/>
<Clone object={ model3.scene } rotation-y={ Math.PI/2}  scale={ 2 } position={[0,0,-6]}/>

Add all the objects in this array into the scene

return ( Array of clone objects )
2

i don’t understand the question, but yes you can return an array of clones. did you experience some kind of problem with that?

3

Do you have any example/pointers for code? Tried a few different approaches with no luck.

4

again, i don’t understand the problem, maybe it’s my bad english. :sweat_smile: i think you need to rephrase it, and specifically describe the problem you can’t solve.

5

Here is an example of loading a glTF and using it in an array.

image

See lines 21-23 in Array of glTF : CodeSandbox

        {[...Array(5).keys()].map((i) => (
          <Suzanne key={i} position={[i * 2.5, 0, 0]} />
        ))}
1 Like
6

Thanks Sean, will have a play with this. What if each GLTF in the array was different?

Eg. I have a array of [20,30,50]

  • I would like to load the models that represent 20,30,50 into the scene. Adjusting position of each.
  • If my array changes eg to [45,20,30,50] I would like the loaded models to change accordingly.
7 
return data.map((props, index) => <Model key={index} {...props} />

this is always reactive, if data changes so will the models.

2 Likes
9

sorry , im newbie in this field , so i want to ask that im using your method to load 3D object is there a way to adjust its props to make it re render use setState , for ex : i have an array with 3 bulbs load with that i got bulbs with key 1 2 3 , now i want to change only bulb 1 material to represent it was on .
thank you .