使用 CreateFromMorphTargetSequence Three.js 加载带有动画的 3D 模型答案

【问题标题】：Loading 3D model with animation using CreateFromMorphTargetSequence Three.js使用 CreateFromMorphTargetSequence Three.js 加载带有动画的 3D 模型
【发布时间】：2021-02-20 04:52:51
【问题描述】：

我正在尝试加载此 GBL 文件并播放动画。此代码返回以下错误：

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 );

  } );
}

如何解决此错误并在播放动画时加载模型？

【问题讨论】：

标签： javascript three.js gltf

【解决方案1】：

const morphClip = THREE.AnimationClip.CreateFromMorphTargetSequence('RingsRising', model.morphTargets );

Object3D 的实例没有 morphTargets 属性。

从 glTF 资源播放动画应该如下所示：

const animations = gltf.animations;
const mixer = new THREE.AnimationMixer( model );
mixer.clipAction( animations[ 0 ] ).setDuration( 1 ).play();

现场示例：https://threejs.org/examples/webgl_morphtargets_horse

【讨论】：