创建一个平面网格，用点定义颜色 [英] Create a plane mesh, with points defining colors

问题描述

我创建了约2500个网格，并使用定义每个网格的颜色的算法。该算法遍历所有网格，并根据其与每个红色起点点的距离添加一个值。

这是结果：

这是滞后的，角落不光滑。我想用一些其他方式重现相同的颜色结果，但不能弄清楚如何。如何使用THREE.Shape和FragmentShader？

最终目标说明：

• 使用一个，增加FPS，网格（THREE.Shape），
  定义要着色的区域。



• p>能够插入X个点作为红色为MAX的位置，距离它更远的地方应该从RED - > GREEN




• 您应该能够移动点




• 在2点或更多点之间的网格部分应根据距离

  $ p> 这里是我的jsfiddle我有多远我得到了。


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

  
  
  

  编辑解决方案：

  
  
  

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

  解决方案

  我已经解决了^^

  
  
  

  更快更容易！

  
  
  

  我的算法的主要问题是距离是以毫米为单位，当它应该在'm'。

    dist = dist /（T * T * T）; 
    

  请在这里查看：

  
  
  

  a href =http://jsfiddle.net/zDh4y/13/ =nofollow> http://jsfiddle.net/zDh4y/13/

  
  

  I've created ~2500 meshes and use an algorithm defining the color of each mesh. The algorithm goes through all meshes and adds a value depending on the distance it has to each "red-start" point. The value then decides what the color should be.

  This is the result:

  It is lagging and the corners aren't smooth. I want to recreate the same color result in some other way but can't figure out how. How can you do it with THREE.Shape and FragmentShader?

  Final Goal Description:

  • Using one, for increase in FPS, mesh (THREE.Shape) that defines the area which is to be colored.

  • Be able to insert X amount of points that acts as positions where RED color is MAX and the further away from it you get it should go from RED -> GREEN

  • You should be able to move the points

  • Parts of the mesh that are in between 2 or more points should turn to a color depending on the distance it has to each point.

  EDIT:

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

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

  EDIT SOLUTION:

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

  解决方案

  I have solved it ^^

  Much smoother, faster and easier!

  Main issue with my algorithm was the distance was in 'millimeter' when it should have been in 'm'.

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

  Check it out here:

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

  这篇关于创建一个平面网格，用点定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！