javascript - 如何在 three.js 中做一个以液体方式移动的 2D 变形圆？

Question

我有一个网格，它是一个圆形几何形状。我想像这个例子中的动画一样，从两个.js，一个 2D 库： https ://two.js.org/examples/physics.html

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

有谁知道我该怎么做？

Answer 1

您只需要根据 X 和 Y 坐标和增量阶段（时间）根据一些 sin() 或 cos() 值移动顶点位置即可进行动画处理。您的顶点着色器可能包括这样的东西，其中相位随时间增加（通常是时钟）。

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

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