小程序
小游戏
企业微信
微信支付
扫描小程序码分享
想通过页面按钮暂停或播放glb模型的动画,glb的动画有很多clip切片动画,要如何控制呢?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
glb动画模型有很多动画的话,可以通过重新渲染一次模型点击实现动画切换,但是重新渲染表示新增一个新的模型(这些所有模型在scene.children能看到所有在屏幕上重叠的模型),得将上一个渲染的模型删除掉,然后新增,我的代码如下这些(初始化也是这些代码,不过添加了一些判断用来删除重复的模型):
function initModel(behavior: string) { // 加载 glb 格式模型 const glbLoader = new GLTFLoader() glbLoader.load('/Models/RobotExpressive.glb', (gltf) => { const model = gltf.scene console.log(gltf) const animations = gltf.animations mixer = new THREE.AnimationMixer(model) let walkingAnimation = mixer.clipAction(animations.find(item => item.name === "Idle")) animationAction = mixer.clipAction(animations.find(item => item.name === behavior)) if (preUuid) { if (model.uuid !== preUuid) { animationAction .reset() .setEffectiveTimeScale(1) .setEffectiveWeight(1) .fadeIn(0.2) .play() // 被点击动画的执行 if (behavior !== 'Walking') { animationAction.loop = THREE.LoopOnce // 被点击动画只执行一次 if (behavior !== 'Death') { setTimeout(() => { walkingAnimation.play() // 被点击动画执行完成后继续执行 站立 动画 }, animationAction.time) } } scene.children.splice(scene.children.findIndex((item: any) => item.uuid === model.uuid), 1) // 删除上一个进行的动画 } } else { animationAction.play() preUuid = model.uuid } model.scale.set(40, 40, 40) // 模型的每个部位都可以投影 model.traverse(function (child: any) { if (child && child.isMesh) { child.castShadow = true; child.receiveShadow = true; } });
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
glb动画模型有很多动画的话,可以通过重新渲染一次模型点击实现动画切换,但是重新渲染表示新增一个新的模型(这些所有模型在scene.children能看到所有在屏幕上重叠的模型),得将上一个渲染的模型删除掉,然后新增,我的代码如下这些(初始化也是这些代码,不过添加了一些判断用来删除重复的模型):
function initModel(behavior: string) { // 加载 glb 格式模型 const glbLoader = new GLTFLoader() glbLoader.load('/Models/RobotExpressive.glb', (gltf) => { const model = gltf.scene console.log(gltf) const animations = gltf.animations mixer = new THREE.AnimationMixer(model) let walkingAnimation = mixer.clipAction(animations.find(item => item.name === "Idle")) animationAction = mixer.clipAction(animations.find(item => item.name === behavior)) if (preUuid) { if (model.uuid !== preUuid) { animationAction .reset() .setEffectiveTimeScale(1) .setEffectiveWeight(1) .fadeIn(0.2) .play() // 被点击动画的执行 if (behavior !== 'Walking') { animationAction.loop = THREE.LoopOnce // 被点击动画只执行一次 if (behavior !== 'Death') { setTimeout(() => { walkingAnimation.play() // 被点击动画执行完成后继续执行 站立 动画 }, animationAction.time) } } scene.children.splice(scene.children.findIndex((item: any) => item.uuid === model.uuid), 1) // 删除上一个进行的动画 } } else { animationAction.play() preUuid = model.uuid } model.scale.set(40, 40, 40) // 模型的每个部位都可以投影 model.traverse(function (child: any) { if (child && child.isMesh) { child.castShadow = true; child.receiveShadow = true; } });