在三个 js 中动画对象的大小

Question

使用 THREE.js 我想为对象的大小设置动画，使其慢慢缩小到虚无。

使用 Three.js - Animate object size 的答案我可以更改对象的大小，但这种大小更改是即时的，我希望更改在一段时间（3 秒）内发生。再加上这个问题很老:)

这是我当前的代码。 backwardMeshOct 只是一个 THREE.Mesh(geometry, material):

      var time = 20;
      function animate() {
        backwardMeshOct.scale.x = Math.abs( Math.sin( time * 50 ) );
      }

      requestAnimationFrame(animate);

我试过改变 var time 和 time 的乘积，但结果仍然相同，x 上的即时大小比例。

感谢您的帮助 doods and doobs。

Answer 1

您可能会发现使用 Tween.JS 这样的库更容易。您将能够为更改定义起始值、目标值和时间增量！

查看此问题的答案，了解它如何与三一起使用：Tween JS basics on three JS cube

如果您无法使用 Tween，请尝试使用 THREE.Clock 对象来跟踪时间并适当地缩放网格。我在全局范围内（在初始化之前）做了一个，然后用它来计数到 3 秒：

function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    var t = clock.getElapsedTime();

    if (t >= 3.0)
    {
        clock = new THREE.Clock;
        mesh.scale.set(1,1,1);
    }
    else
    {
        mesh.scale.x = 1-(t/3.0);
        mesh.scale.y = 1-(t/3.0);
        mesh.scale.z = 1-(t/3.0);   
    }

    renderer.render(scene, camera);

}

完整示例在这里：http://jsfiddle.net/adamfinley/ac6zxgt6/1/

在三个 js 中动画对象的大小

Animate object's size in THREEjs

javascript

animation

scale

three.js