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
//普通环境贴图
-
renderer.toneMapping = THREE.ACESFilmicToneMapping;
-
renderer.toneMappingExposure = 0.85;
