AnimationMixer's update method resets model's scale and position

Hey, folks

So i need to set a model higher, enlarge it, and play its animation. Previously (using the model’s old animation) everything worked, but after I use the updated model with new animation, the mixer’s update method seemingly reset the position and scale. This is the code:

function animate() {
  mixers.forEach(mixer => {
    mixer.update(0.75 * clock.getDelta());
  })

  requestAnimationFrame(animate);
}

const model3ds = await Promise.all(
    featuredProducts3dModels.map(({ model3dUrl }) => load3dModel(model3dUrl))
);

model3ds.forEach((model, index) => {
    const size = new Vector3();
    const box = new Box3().setFromObject(model.scene);
    box.getSize(size);
    const scaleVec = new Vector3(3.25, 3.25, 3.25).divide(size);
    const scale = Math.min(scaleVec.x, Math.min(scaleVec.y, scaleVec.z));
    model.scene.scale.setScalar(scale);
    model.scene.position.y = 3;
    model.scene.traverse((object) => {
      object.name = PRODUCT_NAME + featuredProducts3dModels[index].id;
    });
    hideModel(model.scene);

    const mixer = new AnimationMixer(model.scene);
    model.animations.forEach((clip) => {
      mixer.clipAction(clip).play();
    });
    mixers.push(mixer);

    scene.add(model.scene);
  });

  animate()

If I remove the mixer.update() in animate function, the scale and position work but the animation doesn’t. FYI, This is a function in another file so the renderer is run in the main file, so to speak.

Okay. I’ve found the answer. You must scale and set position AFTER you add the animation to mixer lol

So my code looks like this:

model3ds.forEach((model, index) => {
  const mixer = new AnimationMixer(model.scene);
  model.animations.forEach((clip) => {
    mixer.clipAction(clip).play();
  });
  mixers.push(mixer);

  const size = new Vector3();
  const box = new Box3().setFromObject(model.scene);
  box.getSize(size);
  const scaleVec = new Vector3(3.25, 3.25, 3.25).divide(size);
  const scale = Math.min(scaleVec.x, Math.min(scaleVec.y, scaleVec.z));
  model.scene.scale.setScalar(scale);
  model.scene.position.y = 3;
  model.scene.traverse((object) => {
    object.name = PRODUCT_NAME + featuredProducts3dModels[index].id;
  });
  hideModel(model.scene);
  scene.add(model.scene);
});
1 Like