I'm facing an issue with a Blender model that has animation. After uploading it to the site, the animation works perfectly. However, I'm trying to change the body color of the model, and when I attempt to do so, the body stops animating and becomes static. Strangely, the other elements in the model continue to animate as expected. I'm struggling to identify where the problem lies, so any assistance would be greatly appreciated!
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
const gltfLoader = new GLTFLoader()
let mixer = null;
gltfLoader.load(
'models/bot/model.glb',
(gltf) => {
gltf.scene.traverse((child) => {
if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial){
if(child.name === 'Body'){
child.material = new THREE.MeshStandardMaterial( { color: 'red', wireframe: true } );
child.material.needsUpdate = true
}
}
})
mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(gltf.animations[1])
action.play()
scene.add(gltf.scene)
}
)
//Animation
const clock = new THREE.Clock()
let previousTime = 0
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
const deltaTime = elapsedTime - previousTime
previousTime = elapsedTime
mixer && mixer.update(deltaTime)
// Update controls
controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()