three.js之地图图标旋转角度时模糊不清解决

• 最近在研究three.js真是写一步一个问题😂，无奈还是要继续做。只能一步步填坑

• 先上效果图
  

• 换个角度
  

• 问题：不同的角度看到的图标效果不一样，我想要实现的是不同角度看到的效果是一样的

• 上图的这种效果是用：PlaneGeometry平面模型和MeshBasicMaterial基础网格材料来做的

   drawPlane(x, y, z, value, i) {
      const hei = value / 30
      const geometry = new THREE.PlaneGeometry(1, hei)
      const material = new THREE.MeshBasicMaterial({
        map: this.textures,
        depthTest: false, //不显示黑色
        transparent: true,
        side: THREE.DoubleSide
        // color: 'red'
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.position.set(x, y, z + hei / 2)
      plane.rotation.x = Math.PI / 2
      const plane2 = plane.clone()
      plane2.rotation.y = Math.PI / 2
      return [plane, plane2]
    },

• 想要实现不同角度都能看的同样图片的效果需要用SpriteMaterial精灵材料
• 关键代码

   drawPlane(x, y, z, value, i) {
      return new Promise((resolve, reject) => {
        let arr = []
        const hei = value / 30
        /*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/
        let canvas = document.createElement('canvas')
        canvas.width = 64
        canvas.height = 128
        /*2、创建图形，这部分可以去看w3c canvas教程*/
        let ctx = canvas.getContext('2d')
        var img = new Image()
        img.src = this.img3
        img.onload = function() {
          // 将图片画到canvas上面上去！
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          // /*3、将canvas作为纹理，创建Sprite*/
          let texture = new THREE.Texture(canvas)
          texture.needsUpdate = true //注意这句不能少
          let material = new THREE.SpriteMaterial({
            map: texture,
            depthTest: false,
            rotation: 0,
            transparent: true,
            sizeAttenuation: false
          })
          var plane1 = new THREE.Sprite(material)
          plane1.position.set(x, y, z + 0.6)
          plane1.scale.set(1, 1.1, 1.1)
          var plane2 = plane1.clone()
          arr.push(plane1)
          arr.push(plane2)
          resolve(arr)
        }
      })
    },

• drawPlane方法只是给大家提供一个思路。写完这个后，发现图标还是在不同的角度会有模糊的现象，这时需要把地图模型的 transparent: false,设置一下，这一步很重要！！！！一定要检查