import * as THREE from 'three';

export const TDHeatMap = (data: any,max: number,origin: object, prop: object) => {
  // 热力图
  var heatmap = h337.create({
    container: document.getElementById('heatmap'),
    radius: 2,
    maxOpacity: 1,
    minOpacity: 1,
    gradient: {
      '0.9': '#ff0000',
      '0.8': '#ff6300',
      '0.7': '#f6aa04',
      '0.6': '#f6ce02',
      '0.5': '#dafc03',
      '0.4': '#c7ff00',
      '0.3': '#03ec65',
      '0.2': '#05f8dd',
      '0.1': '#066efa',
      '0.05': '#030FFA',
      '0': '#001736',
    },
  });
  heatmap.setData({
    max: max,
    data: data
  });
  // 灰度图
  var greymap = h337.create({
    container: document.getElementById('greymap'),
    gradient: {
      '0': 'black',
      '1.0': 'white'
    }
  });

  greymap.setData({
    max: max,
    data: data
  });
  let heatMapMaterial = new THREE.ShaderMaterial({
    transparent: true,
    vertexShader: `varying vec2 vUv;
        uniform float Zscale;
        uniform sampler2D greyMap;
        void main() {
         vUv = uv;
        vec4 frgColor = texture2D(greyMap, uv);//获取灰度图点位信息
        float height = Zscale * frgColor.a;//通过灰度图的rgb*需要设置的高度计算出热力图每个点位最终在z轴高度
        vec3 transformed = vec3( position.x, position.y, height);//重新组装点坐标
        gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);//渲染点位

        }
      `,
    fragmentShader: `varying vec2 vUv;
        uniform sampler2D heatMap;//热力图
        uniform vec3 u_color;//基础颜色
        uniform float u_opacity; // 透明度
        void main() {
          //vec4 alphaColor = texture2D(heatMap, vUv);
          // gl_FragColor = alphaColor;
           gl_FragColor = vec4(u_color, u_opacity) * texture2D(heatMap, vUv);//把热力图颜色和透明度进行渲染
        }`,
    uniforms: {
      'heatMap': {
        value: { value: undefined }
      },
      'greyMap': {
        value: { value: undefined }
      },
      Zscale: { value: 0.0 }, // 高度参数
      u_color: {
        value: new THREE.Color('rgb(255, 255, 255)')
      },
      u_opacity: {
        value: 1.0
      },
    }
  });
  let texture = new THREE.Texture(heatmap._config.container.children[0]);
  texture.needsUpdate = true;
  let texture2 = new THREE.Texture(greymap._config.container.children[0]);
  texture2.needsUpdate = true;
  heatMapMaterial.uniforms.heatMap.value = texture;
  heatMapMaterial.side = THREE.DoubleSide; // 双面渲染
  heatMapMaterial.uniforms.greyMap.value = texture2
  const heatMapModel = new THREE.PlaneGeometry(
    Math.ceil(prop.gridWidth / prop.resolution) * prop.resolution,
    Math.ceil(prop.gridHeight / prop.resolution) * prop.resolution,
    Math.ceil(prop.gridWidth / prop.resolution),
    Math.ceil(prop.gridHeight / prop.resolution)
  ) // 3d热力图大小，及分块数量
  heatMapModel.scale(1, -1, 1);
  let heatMapPlane = new THREE.Mesh(heatMapModel, heatMapMaterial)
  // heatMapPlane.rotation.set(-Math.PI / 2, 0, 0);
  heatMapPlane.position.set(origin.x, origin.y, origin.z);  //  3d热力图中心点位置
  return heatMapPlane
}