如何在 WebGL 和 Three.js 和 Tween.js 中创建一个不断增长的对象答案

【问题标题】：How can I create a growing object in WebGL and Three.js and Tween.js如何在 WebGL 和 Three.js 和 Tween.js 中创建一个不断增长的对象
【发布时间】：2026-01-24 07:50:01
【问题描述】：

我是 Three.js 和 Tween.js 的新手。我想创建一个对象可以“生长”的动画：就像 3D 球的动画长成一个管子（或 3D 球被拖进管子）。

这可以由 THREE.ExtrudeGeometry 和 Tween.js 创建吗？如是，我可以对此有一些详细的解释或简单的步骤吗？

如果有任何更好的想法，我将不胜感激。 :)

非常感谢。

兄弟们，布莱恩

【问题讨论】：

标签： animation three.js tween.js

【解决方案1】：

如果您只想改变对象的大小，可以通过调整它的比例来完成。

objectsName.scale.set(xValue, yValue, zValue);

但是，根据您的描述，您似乎想要变形您的对象。在threejs.org 上有一个很好的例子来说明如何做到这一点。

http://threejs.org/examples/#webgl_morphtargets

我希望这会有所帮助。

【讨论】：

您好约翰，感谢您的回答。这有帮助，我可以再问你一些问题吗？例如threejs.org/examples/#webgl_morphtargets 立方体可以变形到一个方向（一个变形目标），并且可以像“mesh.morphTargetInfluences[ direction ]”一样进行动画处理。但是对于 SphereGeometry，如何变形球体？就像把球拖进管子里？
抱歉，我不太清楚如何将球体变形为圆柱体。首先，我将创建一个位于 0,0,0 的圆柱体，并将所有顶点的位置推入一个数组中。确保起始球体和结束圆柱体具有相同数量的顶点。我不知道该怎么做。也许与镶嵌或细分。然后使用 tween.js 将球体的所有顶点移动到圆柱体数组的位置。