three-解析图片颜色生成使用多实例网格柱状图

解析图片颜色生成柱状图

获取图片每像素颜色

读取图片生成一张只有图片的canvas，可以设置的缩放比例设置图片的精细度，然后通过canvas的getImageData(0,0, img.width, img.height)的方法来获取整个图片每个像素点的颜色值，获取的颜色为依次排列的数组(r,g,b,a) / 255；

2048 * 1024 灰度图

通过获取的颜色值来生成柱状图

通过获取的数据来生成Box， 因为都是同样的box， 可以通过使用 多实例网格 InstancedMesh 来优化性能；

• 缩放5倍的图片解析，图片像素点及绘制的柱状图个数32768，绘制的总三角面为393216；
  
• 原图解析，图片像素点及绘制的柱状图个数2097152，绘制的总三角面为25165824； （卡顿）
  
  
  代码下载：代码下载

qq交流群：1082834010
群分享中有代码