2

我想在使用变形目标创建的最后一帧处停止 AnimationAction。

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

我试过animationAction.clampWhenFinished = true;了，但这似乎不起作用。

我查看了较旧的stackoverflow 问题并在论坛中进行了搜索，但解决方案无效。

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/

4

2 回答 2

0

我查看了three.js 代码。在 LoopOnce 中，涉及clampWhenFinished 的部分根本没有受到影响。

现在我会以一种非常粗暴的方式来做，直到找到更好的解决方案：

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);
}

如果您需要更多功能，请使用 Tween.js。

于 2019-05-31T15:49:02.000 回答
0

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

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(name: String, morphTargetSequence: Array, fps: Number, noLoop: Boolean ) 的“noLoop”参数需要为“true”以及 clampWhenFinished = true 和 setLoop(THREE.LoopOnce)。

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

于 2021-08-18T11:53:44.493 回答