I’m using Three.js and React. I’m trying to display gltf object based on latitude and longitude in locations array of objects. I tried using for loop and access to each latitude and longitude and set position based on them, however only one gltf is show up on the screen. How do I add all the gltf to the scene?
You’re calling Scene.add on the same gltf object multiple times - so in the end it’ll be placed in the last of the positions. Clone the model after loading it to create multiple copies:
Thank you!
So I updated my code. It seems that there are multiple gltf was added to scene however they are rendered so weird. I deleted objects except for one and made it only loop for one time, but still I see the same style of object. If I render just one gltf it looks different. It seems gltf.scene.clone(); part is affecting the shape of gltf. Do you come up with any reason?
loader.load("/low_australian_shepherd/scene.gltf", function (gltf) {
for (let i = 0; i <= locations.length; i++) {
const clone = gltf.scene.clone();
clone.scale.setScalar(2.5);
clone.translateY(100);
clone.rotateY(-90);
clone.position.copy(
overlay.latLngAltitudeToVector3({
lat: locations[i].lat,
lng: locations[i].lng,
})
);
scene.add(clone);
}
});