const { THREE } = VgoMap
const tex = generateTexture(64)
if(tex) {
  tex.wrapT = tex.wrapS = THREE.RepeatWrapping
}
export function generateFence(points: Point[]) {
  const shape = new THREE.Shape()
  shape.setFromPoints(points as any[])
  const geo = new THREE.ExtrudeGeometry(shape, {
    steps: 2,
    depth: 90,
    bevelEnabled: false,
  })
  const mater = [
    new THREE.MeshBasicMaterial({
      color: '#ff7f50',
      transparent: true,
      opacity: 0.1,
      visible: true,
    }),
    new THREE.MeshBasicMaterial({
      map: tex,
      transparent: true,
      color: '#ff7f50',
      opacity: 0.1,
      side: 2,
    })
  ]
  const mesh = new THREE.Mesh(geo, mater)
  mesh.material.forEach(m => m.opacity = 0.7)
  const center = calculateGeometryCenter(points)
  console.log(center)
  return mesh
}

export function generateTexture (size = 64, color = '#ff7f50') {
  let canvas = document.createElement('canvas')
  canvas.width = size
  canvas.height = size
  let ctx = canvas.getContext('2d')
  if(!ctx) return
  let linearGradient = ctx.createLinearGradient(0, 0, 0, size)
  linearGradient.addColorStop(0.2, hexToRgba(color, 0.0))
  linearGradient.addColorStop(0.8, hexToRgba(color, 0.5))
  linearGradient.addColorStop(1.0, hexToRgba(color, 1.0))
  ctx.fillStyle = linearGradient
  ctx.fillRect(0, 0, size, size)

  let texture = new THREE.Texture(canvas)
  texture.needsUpdate = true // 必须
  return texture
}

function hexToRgba (hex: any, opacity = 1) {
  return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' +
    parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
}