R3F Load Array of Objects to Add to scene

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 )

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

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

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.

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


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

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.
return data.map((props, index) => <Model key={index} {...props} />

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