Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

218
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda