动画动作如何在最后一帧停止而不循环三.js

Question

我想在我使用变形目标创建的最后一帧停止动画操作。

https://threejs.org/docs/#api/en/animation/AnimationAction

我已经尝试过animationAction.clampWhenFinished = true;但这似乎不起作用。

我查看了较旧的堆栈溢出问题并通过论坛进行了搜索，但解决方案不起作用。

var cubeTarget1 = new THREE.BoxGeometry(20, 10, 10);
var cubeTarget2 = new THREE.BoxGeometry(20, 10, 50);
var cubeTarget3 = new THREE.BoxGeometry(60, 10, 10);
cubeGeometry.morphTargets[0] = {name: 't1', vertices: cubeTarget1.vertices};
cubeGeometry.morphTargets[1] = {name: 't2', vertices: cubeTarget2.vertices};
cubeGeometry.morphTargets[2] = {name: 't3', vertices: cubeTarget3.vertices};

有没有办法我可以做这样的事情：(这不起作用，它会循环回第一个 morphTarget(

var clip1 = THREE.AnimationClip.CreateFromMorphTargetSequence('run', [cubeGeometry.morphTargets[0],cubeGeometry.morphTargets[1]], 30);
var action1 = mixer.clipAction(clip1);
action1.play(); // starts at cubeTarget1 ends at cubeTarget2 (animating between them, without a loop)
// and at a later point I'd like to do
var clip2 = THREE.AnimationClip.CreateFromMorphTargetSequence('run', [cubeGeometry.morphTargets[1],cubeGeometry.morphTargets[2]], 30);
var action2 = mixer.clipAction(clip2);
action2.play(); // starts at cubeTarget2 ends at cubeTarget3 (animating between them, without a loop)

这是我的小提琴：https://jsfiddle.net/foreyez/uy8abk6v/

Answer 1

这是我在

三.js原型第一人称射击游戏中与敌方机器人gltf模型一起使用的方法。机器人具有具有多个帧的单轨动画。我必须使用以下代码将帧拆分为子剪辑，然后在完成后应用夹子。

var EnemyHeavyBotFallBackClip = THREE.AnimationUtils.subclip(gltf.animations[0], “Take_001”, 1300, 1355);
actionEnemyHeavyBotFallBackMixer = mixer.clipAction(EnemyHeavyBotFallBackClip);
actionEnemyHeavyBotFallBackMixer.clampWhenFinished = true;
actionEnemyHeavyBotFallBackMixer.setLoop(THREE.LoopOnce);
actionEnemyHeavyBotFallBackMixer.play();

https://www.shanebrumback.com/super-soldier-battle-intro.html

免责声明：这是我的网站。

Answer 2

我查看了三个.js代码。而在LoopOnce中，涉及clampWhenFinish的部分根本没有被击中。

现在，我将以一种非常粗略的方式进行，直到找到更好的解决方案：

action.setDuration(5).play(); 
setTimeout(function()
{
    action.paused = true;
},2500); // half of the duration

我一直在做的另一种方法是使用morphTargetInfluences，并在动画循环中增加它：

function animate() {
  if (cube.morphTargetInfluences[0] < 1)
    cube.morphTargetInfluences[0] += 0.01;
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

如果需要更多功能.js请使用补间。

Answer 3

我花了一段时间才让它工作，很多在线示例似乎已经过时和/或不起作用。尝试：

var clips = THREE.AnimationClip.CreateClipsFromMorphTargetSequences(geometry.morphAttributes.position, 60, true);
mixer = new THREE.AnimationMixer(points);
var action = mixer.clipAction(clips[0]).setDuration(10);
action.clampWhenFinished = true;
action.setLoop(THREE.LoopOnce);
action.play();

请注意，CreateClipsFromMorphTargetSequences(名称：String，morphTargetSequence：Array，fps：Number，noLoop：Boolean(的"noLoop"参数需要为"true"以及clampWhenDone = true和setLoop(THREE.循环一次(。

完整示例在这里 https://jsfiddle.net/jm4ersoq/