Question

使用THREE.js我想动画一个物体的大小，使它慢慢缩小为虚无。

使用来自Three.js - Animate object size的答案我可以更改对象的大小，但此大小更改是即时的，我希望更改在一段时间（3秒）内发生。再问题是旧的：）

这是我目前的代码。 backwardMeshOct只是一个THREE.Mesh（几何，材料）：

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

      requestAnimationFrame(animate);

我尝试更改var time和time乘以但结果仍然相同，即x的即时大小比例。

感谢您的帮助和dobs。

Answer 1

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

查看此问题的答案，了解它如何与三个人合作：Tween JS basics on three JS cube

如果您无法使用Tween，请尝试使用THREE.Clock对象来跟踪时间并适当缩放网格。我在全局范围内（在init之前）创建了一个，然后使用它计数到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/

在THREEjs中设置对象的大小

1 个答案: