three.js加载环境贴图

 

three.js加载环境贴图

 

HDR的全称是High Dynamic Range，即高动态范围;动态范围是指图像中所包含的从“最亮”至“最暗”的比值，也就是图像从“最亮”到“最暗”之间灰度划分的等级数；动态范围越大，所能表示的层次越丰富，所包含的色彩空间也越广。那高动态范围（HDR）顾名思义就是从“最亮”到“最暗”可以达到非常高的比值。
HDR文件的像素值可以覆盖现实世界中存在的整个色调范围。HDR图像能够显示尽可能大的像素值范围。 因此，可以通过栩栩如生的色彩描绘来捕捉直射光和阳光以及极端阴影。HDR图像可以通过以特定方式合成不同的照片、使用特殊的图像传感器或通过计算机渲染来创建。

 const textureLoader = new THREE.TextureLoader(manager)
  const rgbeLoader = new RGBELoader()

  function loadTexture(url) {
    if (!url) {
      return Promise.resolve()
    }
    return new Promise(function(resolve, reject) {
      textureLoader.load(
        url,
        function(texture) {
          texture.encoding = THREE.sRGBEncoding
          texture.needsUpdate = true
          resolve(texture)
        },
        null,
        function(error) {
          reject(error)
        }
      )
    })
  }

  function loadHdr(url, isNoEq) {
    if (!url) {
      return Promise.resolve()
    }
    return new Promise(function(resolve, reject) {
      console.log('hdr load', url)
      /* if (isNoEq) {
        rgbeLoader.setDataType(THREE.FloatType);
      } else {
        rgbeLoader.setDataType(THREE.HalfFloatType);
      } */
      rgbeLoader.load(
        url,
        (texture, textureData) => {
          console.log('hdr loaded', url)
          let hdrtexture
          if (isNoEq) {
            hdrtexture = texture
          } else {
            hdrtexture = pmremGenerator.fromEquirectangular(texture).texture
            texture.dispose()
          }
          hdrtexture.encoding = THREE.sRGBEncoding
          hdrtexture.needsUpdate = true
          resolve(hdrtexture)
        },
        null,
        function(error) {
          console.log('hdr error', url, error)
          reject(error)
        }
      )
    })
  }

  loadHdr('图片地址').then((texture) => {
      obj.traverse(function(child) {
        if (child.isMesh) {
          // child.frustumCulled = false
        }
        if (child.material) {
          child.material.envMap = texture
          child.material.needsUpdate = true
        }
    })


  loadTexture('环境贴图地址').then((texture)=>{
        scene.environment = texture;
        scene.environment.mapping = THREE.EquirectangularReflectionMapping;
  })

　　// renderer.toneMappingExposure 可以调整光照渲染强度

　　//hdr环境贴图

　　renderer.toneMapping = THREE.NoToneMapping

       renderer.physicallyCorrectLights = true

　　

　　　//普通环境贴图

1.  renderer.toneMapping = THREE.ACESFilmicToneMapping;
2.  renderer.toneMappingExposure = 0.85;