When attempting to load a GBL file and play the animation, I encountered the following error message:
TypeError: Cannot read property 'length' of undefined at Function.CreateFromMorphTargetSequence
function Animate() {
if(window.anim_flag)
{
// Hotspot_Ring_Anim();
requestAnimationFrame(Animate);
renderer.clear();
TWEEN.update();
orbit.update();
if (mixer.length > 0) {
var delta = clock.getDelta();
for (var i = 0; i < mixer.length; i++) {
mixer[i].update(delta);
}
}
renderer.render(scene, camera);
}
}
function Add_Hotspot_Rings(id,px,py,pz,rx,ry,rz,sx,sy,sz) {
const loader = new GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '../jsm/draco/' );
loader.setDRACOLoader( dracoLoader );
loader.load( '../Models/ABB_Clinic_AnimatedRings_Lowpoly_02.glb', function ( gltf ) {
const model = gltf.scene;
model.name = 'hotspot_rings';
model.position.set(px,py,pz);
model.rotation.set(0,ry,rz);
model.scale.set(0.90, 0.3, 0.90);
scene.add(model);
// MORPH
const mixerr = new THREE.AnimationMixer( model );
const clips = model.animations;
const morphClip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'RingsRising', model.morphTargets );
mixerr.clipAction(morphClip).setDuration(1).play();
mixer.push(mixerr);
window.anim_flag= true;
Animate();
}, undefined, function ( error ) {
console.error( error );
} );
}
Is there a way to fix this error and successfully load the model with the animation playing?