在 THREEjs 中动画对象的大小答案

【问题标题】：Animate object's size in THREEjs在 THREEjs 中动画对象的大小
【发布时间】：2015-10-27 19:15:39
【问题描述】：

使用 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 上的大小比例。

感谢您的帮助。

【问题讨论】：

添加一个setTimeout(function() { backwardMeshOct.scale.x = ... }, 3000) 以使您的比例在 3 秒后更改或添加一个setTimeout(function() { time = /* a new value */ }, 3000) 以使时间变量在 3 秒后更改怎么样？

标签： javascript animation three.js scale

【解决方案1】：

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

查看此问题的答案，了解它如何与 3 一起使用：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/

【讨论】：

我希望答案只使用 Three.js。由于雇主的限制，我无法在当前项目中添加 Tween.JS :(
@IanSteffy 当然！我用一些代码编辑了我的帖子，只在三个中完成。
没有 Tween 的解决方案有效但是，我没有测试 Tween 解决方案。我希望别人会。