Wrong animation speed of main model when clone more model

Questions
, , , , ,
1

Hello guys,
When loading for the first time. I add one main model to the scene and add the main mixer to the mixers array and play the animate function. When I add one more model to scene and add mixer to array mixers. The animation of main model display faster and not sync with other. How can I control that sync.
Below this is my code when I add other model to scene and animate function.

const changeColorWireframe = (color) => {
    if (color != '' && modelWireframe && mixerMainModel) {
      const mat = new THREE.MeshBasicMaterial({
        color: color,
        skinning: true,
        wireframe: true,
      })
      modelWireframe.traverse((node) => {
        if (node instanceof THREE.Mesh) {
          node.receiveShadow = true
          node.castShadow = true
          node.material = mat
        }
      })
      modelWireframe.name = 'wireframe_model'
      mixerWireframe = new THREE.AnimationMixer(modelWireframe)
      mixerWireframe.clipAction(model.animations[1]).play()
      scene.add(modelWireframe)
      const xyz = [...mixers, mixerWireframe]
      setMixers(xyz)
      animate()
    }
  }

const animate = () => {
    requestAnimationFrame(animate)
    const delta = clock.getDelta()
    for (const mixer of mixers) {
      mixer.update(delta)
    }
    render()
  }

  const render = () => {
    gl.render(scene, camera)
  }

This is my result


Please kindly help me

2

Should changeColorWireframe only change the color of the wireframe model? In your code it appears that each color change also adds a new mixer and reactivates the animation loop.

When I try myself, loading FBX model, cloning it into wireframe, and changing the color of the wireframe without making new mixers or reactivating the already active animation loop, everything works fine.

var loader = new THREE.FBXLoader( );
    loader.load( '../Models/mixamo/BossOffensiveIdle.fbx', objectLoaded );

var mixerMainModel, mixerWireframe, modelWireframe;

function objectLoaded( model )
{
	...			
	scene.add( model );
	
	mixerMainModel = new THREE.AnimationMixer( model );
	mixerMainModel.clipAction( model.animations[0] ).play();
	
	modelWireframe = model.clone();
	scene.add( modelWireframe );
}

function changeColorWireframe(color) {
	if (color != '' && modelWireframe && mixerMainModel) {
	  const mat = new THREE.MeshBasicMaterial({
		color: color,
		wireframe: true,
	  })
	  modelWireframe.traverse((node) => {
		if (node instanceof THREE.Mesh) {
		  node.material = mat
		}
	  })
	}
  }


function animate( t )
{
	changeColorWireframe(new THREE.Color().setHSL(0.5+0.5*Math.sin(t),1,0.5) )
	if( mixerMainModel ) mixerMainModel.update( dT );
	...
}

3

Hi,
Thanks so much. I success it.
Could you help me draw an VertexNormalsHelper sync to the animation of that model?

4

I have no experience with VertexNormalsHelper and SkinnedMesh. You may have a look at how others has solved this issue:

5

Thanks so much.