javascript - 创建平面网格，点定义颜色

Question

我创建了大约 2500 个网格，并使用一种算法定义每个网格的颜色。该算法遍历所有网格，并根据它到每个“红色起点”点的距离添加一个值。然后该值决定颜色应该是什么。

这是结果:

它滞后， Angular 落不光滑。我想以其他方式重新创建相同的颜色结果，但无法弄清楚如何。如何使用 THREE.Shape 和 FragmentShader 来实现？

最终目标说明:

• 使用一个，为了增加 FPS，网格 (THREE.Shape)定义要着色的区域。

• 能够插入 X 个点作为红色最大的位置，离它越远，它应该从红色 -> 绿色

• 你应该可以移动点

• 2 个或更多点之间的网格部分应根据与每个点的距离变成一种颜色。

编辑:

Here is my jsfiddle of how far I've gotten.

http://jsfiddle.net/zDh4y/9/

编辑解决方案:

http://jsfiddle.net/zDh4y/13/

Answer 1

我已经解决了^^

更顺畅、更快速、更轻松!

我的算法的主要问题是距离本应以“m”为单位时却以“毫米”为单位。

dist = dist / (T * T * T);

在这里查看:

http://jsfiddle.net/zDh4y/13/