Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

217
Vistas
Three.js - How to instancedmesh an animated object?

I have an animated model. If possible, I want to use instancedmesh and have many of them animated on a single draw call, and have them animate at different intervals. In my example, I have also applied a texture to one of the model's childs. The textures will need to be different for each model, but I read changing the materials in the array of instancedmesh would not be possible.

A rough amount of the code I have for cloning 64 animated models, and animating them

var OBJECT_LIST = [];
var models = [];//contains loaded models

var model = function( id ) {
    var self = {
        id: id,
        object:  cloneGltf(models[0]),
        position: {
            x: Math.floor(Math.random() * 100),
            y: Math.floor(Math.random() * 100),
            z: Math.floor(Math.random() * 100)
        }
    };
    self.object.scene.children[1].children[1].skinning = true;
    self.object.scene.children[1].children[1].morphTargets = true;      
    self.object.scene.children[1].children[1].material = material;
    
    
    self.object.scene.position.set(self.position.x, self.position.y, self.position.z);
    
    self.object.scene.rotation.x = self.rotation.x;
    self.object.scene.rotation.y = self.rotation.y;
    self.object.scene.rotation.z = self.rotation.z;
    
    self.mixer = new THREE.AnimationMixer( self.object.scene );
    
    const clip = THREE.AnimationClip.findByName( self.object.animations, animationName );
    self.action = self.mixer.clipAction( clip );
    self.action.play();
    
    //self.object.scale.set(0.025, 0.025, 0.025);
    //self.object.scale.set(0.001, 0.001, 0.001);
    self.object.scene.scale.set(5, 5, 5);
    
    self.mixer = new THREE.AnimationMixer( self.object.scene );
    
    const clip = THREE.AnimationClip.findByName( self.object.animations, animationName );
    self.action = self.mixer.clipAction( clip );
    self.action.play();
    
    
    scene.add(self.object.scene);
    
    OBJECT_LIST[self.id] = self;
}
function init(){
    for(var i = 0; i < 64; i++){
        var tmp = new model(i);
    }
}
var delta;
function render() {
    requestAnimationFrame( render );
    
    delta = clock.getDelta();
    
    //Players
    for(var O in OBJECT_LIST){
        var object = OBJECT_LIST[O];
        
        object.mixer.update( delta );
    }
    
    renderer.render( scene, camera );
}

If not possible, what would be the closest way to achieve the desired ambition with the best performance?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda