[英]Loading 3D model with animation using CreateFromMorphTargetSequence Three.js
I'm trying to load this GBL file and play the animation.我正在尝试加载此 GBL 文件并播放动画。 This code returns the following error:此代码返回以下错误:
TypeError: Cannot read property 'length' of undefined at Function.CreateFromMorphTargetSequence类型错误:无法读取 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 );
} );
}
How can I resolve this error and load the model with the animation playing?如何解决此错误并在播放动画时加载模型?
const morphClip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'RingsRising', model.morphTargets ); const morphClip = THREE.AnimationClip.CreateFromMorphTargetSequence('RingsRising', model.morphTargets);
Instances of Object3D
do not have a morphTargets
property. Object3D
实例没有morphTargets
属性。
Playing an animation from a glTF asset should look like so:从 glTF 资产播放动画应该如下所示:
const animations = gltf.animations;
const mixer = new THREE.AnimationMixer( model );
mixer.clipAction( animations[ 0 ] ).setDuration( 1 ).play();
Live example: https://threejs.org/examples/webgl_morphtargets_horse现场示例: https : //threejs.org/examples/webgl_morphtargets_horse
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.