three.js加载环境贴图

Posted 2023-03-22 web与webGL

 

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;