时间戳

首页 > 解决方案 > 如何以随机间隔在 three.js 中循环播放 GLTF 动画？

javascript - 如何以随机间隔在 three.js 中循环播放 GLTF 动画？

问题描述

我正在尝试使用 Three.js 创建游戏，我想问是否有办法为 GLFT 模型设置动画，但我不想使用动画循环，而是使用随机间隔。就我而言，游戏是关于照顾青蛙的（但我很酷，所以我拼写为 phrogs），作为一个空闲动画，我希望青蛙随机发出叫声。在进一步的开发中，我还想为运动、进食等添加随机播放动画，但现在我只需要呱呱叫的动画。这是加载模型并为其设置动画的代码：

const basePhrog = new GLTFLoader()
var obj
basePhrog.load('assets/models/Phrogs/base phrog/phrog.gltf', function (gltf) {
  mixer = new THREE.AnimationMixer(gltf.scene)
  obj = gltf.scene
  var action = mixer.clipAction(gltf.animations[0])
  scene.add(gltf.scene)
  action.play()
})

我的动画循环如下所示：

function animate () {
  requestAnimationFrame(animate)
  var delta = clock.getDelta()
  if (mixer) mixer.update(delta)
  renderer.render(scene, camera)
}
animate()

我希望你能帮助并感谢你的任何建议！

标签： javascriptanimationthree.jsgltf

解决方案

glTF 文件提供一个动画（或 Three.js 术语中的 THREE.AnimationClip），该剪辑的播放由THREE.AnimationAction实例管理。您示例中的代码将立即开始播放该动画，并永远循环播放，但 AnimationAction 不必以这种方式使用。

相反，您可以等待并以随机间隔播放动作：

var action = mixer.clipAction( animation );
action.loop = THREE.LoopOnce;

// Play animation randomly every 1-10s.
setInterval(() => {
  action
    .reset()
    .play();
}, Math.random() * 9000 + 1000);

无论动画是否在任何给定时间播放，您都可以像现在一样继续更新 AnimationMixer。

如果您稍后尝试在同一个对象上播放多个动画，一些用于在两个动画之间转换的 API 可能会有所帮助，请参阅动画/蒙皮/变形示例。

推荐阅读