javascript - 我怎样才能在 three.js 中做一个以液体方式移动的 2D 变形圆圈？

Question

我有一个网格，它是一个圆形几何体。我想像这个示例中的二维库 two.js 一样对其进行动画处理: https://two.js.org/examples/physics.html

现在我看这个例子并将相机放在形状的顶部，但我确信有一个更简单的方法可以满足我的需要:https://threejs.org/examples/#webgl_gpgpu_water

有人知道我该怎么做吗？

Answer 1

您只需根据一些 sin() 或 cos() 值根据 X 和 Y 坐标以及增量阶段(时间)移动顶点位置即可制作动画。 您的顶点着色器可以包含类似这样的内容，其中相位随时间(通常是时钟)递增。

glPosition.x = vertex.x + sin((phase*frequency) + vertex.y) * amplitude;
glPosition.y = vertex.y + sin((phase*frequency) + vertex.x) * amplitude;

基本概念在这里，但您必须通过测试结果自行调整组件。您可能应该调整频率、幅度，添加更多因素以增加不对称性和随机性。