最资讯丨three.js加载环境贴图

2023-03-22 13:54:55 来源：博客园

(相关资料图)

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　　　　　//普通环境贴图

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

关键词：