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

Question

我正在尝试使用 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()

希望大家多多指教，多多指教！

Answer 1

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 可能会有所帮助，请参阅 animation / skinning / morph 示例。

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

How can I loop a GLTF animation in three.js with random intervals?

javascript

animation

three.js

gltf