TextureLoader 加载进度处理

参考：Revert FileLoader-based ImageLoader · Issue #10439 · mrdoob/three.js · GitHub

处理这类型图片

three_demo: https://threejs.org/examples/#webgl_panorama_equirectangular

demo

- 添加缓存后显示进度

调用

this.dealTextureLoader(url)

调用后处理

dealTextureLoader(path) {
   this.initTextureLoader().load(
       path,
       texture => {
       /**
       * RepeatWrapping：重复平铺
       * MirroredRepeatWrapping：重复平铺。每一次重复前先镜像，使用镜像后的生成的纹理重复平铺
       *
       * wrapS: 纹理在水平方向上纹理包裹方式
       * wrapT: 纹理贴图在垂直方向上将如何包裹
       */
       texture.wrapS = texture.wrapT = RepeatWrapping
       texture.repeat.set(-1, 1)

       const geometry = new SphereGeometry(500, 64, 64)
       geometry.scale(-1, 1, 1)
       const material = new MeshBasicMaterial({
          map: texture,
          side: DoubleSide
       })

       const mesh = new Mesh(geometry, material)
       scene.add(mesh)

       if (this.progress >= 100) {
           this.$emit('loading', false)
       }
    },
      num => {
         this.$emit('progress', Math.floor((num.loaded / num.total) * 100))
      }
    )
}

进度条处理

initTextureLoader() {
  cache = Cache
  // Turn on shared caching for FileLoader, ImageLoader and TextureLoader
  cache.enabled = true

  const textureLoader = new TextureLoader()
  const fileLoader = new FileLoader()
  fileLoader.setResponseType('blob')

  const _self = this
  function load(url, onLoad, onProgress, onError) {
    const cached = cache.get(url)
    if (cached) {
      // return cached
      hanveImage()
    } else {
      fileLoader.load(url, cacheImage, onProgress, onError)
    }

    function hanveImage() {
      // document.body.appendChild(cached)
      let _num = 10
      let _timer = window.setInterval(() => {
        if (_num >= 100) {
          window.clearInterval(_timer)
          loadImageAsTexture()
        } else {
          _num += 10
          _self.$emit('progress', _num)
        }
      }, 50)
    }

    /**
     * The cache is currently storing a Blob, but we need to cast it to an Image
     * or else it won't work as a texture. TextureLoader won't do this automatically.
     */
    function cacheImage(blob) {
      // ObjectURLs should be released as soon as is safe, to free memory
      objUrl = URL.createObjectURL(blob)
      image = document.createElementNS('http://www.w3.org/1999/xhtml', 'img')

      image.onload = () => {
        cache.add(url, image)
        URL.revokeObjectURL(objUrl)
        document.body.removeChild(image)
        loadImageAsTexture()
      }

      image.src = objUrl
      image.style.visibility = 'hidden'
      document.body.appendChild(image)
    }

    function loadImageAsTexture() {
      textureLoader.load(url, onLoad, () => {}, onError)
    }
  }

  return Object.assign({}, textureLoader, { load })
},