I’m new in this field but in my work the need to load a lot of objects (more than 40) and most of then have an animation (walking, talking, scrolling their cellphones, …), but at the moment that I load all the objects (in this case 10 for testing), the render freezes and gets slower at the moment that I add more objects.
Yes, I know that I may have a lot of mistakes but that’s why I’m here haha. Sorry for my misspelling, I’m still working on that.
I’m new in this field but in my work the need to load a lot of objects (more than 40) and most of then have an animation (walking, talking, scrolling their cellphones, …), but at the moment that I load all the objects (in this case 10 for testing), the render freezes and gets slower at the moment that I add more objects.
Yes, I know that I may have a lot of mistakes but that’s why I’m here haha. I added all objects in a JSON to load them and mesh them, but I don’t know how to optimize this to not feeze my render.
all models here, I just wrote one for this example.
obj -> url, txt -> textures, action -> true (has animation), false (it’s a static object).
var models =
{ scSubj01:
{ obj: man_nodding_obj, txt: man_walking_txt, mesh: null, name: "scSubj01", mixer: null, anims: null, x: -91.67, y: 0, z: -1132.19, rot: leftV, scale: 1.7, action: true, promise: null}
}
This is the method that it’s called from the main js file, and returns the json variable with their mesh, mixer and anims loaded, the reason that I used promises here it was to preload the objects but I didn’t know the right way to use them for this example
addNewSubject()
{
let self = this;
let models = Models.getModels();
for( var model in models)
{
var txt = null;
(function (key)
{
let promise_obj = new Promise( resolve =>
{
self.loader.load(models[key].obj, function (object)
{
if (models[key].txt != null) { txt = new THREE.TextureLoader().load(models[key].txt); }
object.traverse( function (child) {
if (child.isMesh)
{
child.castShadow = true;
child.receiveShadow = true;
if (txt != null) { child.material.map = txt; }
}
});
if (models[key].action && object.animations[0] != null)
{
models[key].mixer = new THREE.AnimationMixer(object);
models[key].mixer.timeScale = 4;
models[key].anims = object.animations[0];
const act = models[key].mixer.clipAction(models[key].anims);
act.play();
}
models[key].mesh = object;
object.position.set(models[key].x, models[key].y, models[key].z);
const size = models[key].scale;
object.scale.set(size, size, size);
object.rotation.set(0, models[key].rot, 0);
self.scene.add(object);
}); //, resolve
});
models[key].promise = promise_obj;
})(model);
}
return models; //return models to updated them in animate function
}