526互联

加载 hdr 图片作为环境背景和环境贴图

发布时间 2023-04-06 10:03:32作者: 脉望

加载 hdr 图片作为环境背景和环境贴图

import * as THREE from 'three'
import renderer from '../renderer'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

const scene = new THREE.Scene()
const pmremGenerator = new THREE.PMREMGenerator( renderer )
pmremGenerator.compileEquirectangularShader()
new RGBELoader()
    .load('/texture/天空.hdr', function ( texture ) {
        const envMap = pmremGenerator.fromEquirectangular( texture ).texture

        // scene.background = new THREE.Color(0x111111)
        const envIntensity = 1.0
        envMap.encoding = THREE.LinearEncoding
        envMap.minFilter = THREE.LinearFilter
        envMap.magFilter = THREE.LinearFilter

        scene.background = envMap
        scene.environment = envMap.multiplyScalar(envIntensity)
        pmremGenerator.dispose()
    })

export default scene

纹理贴图有不同的编码方式和过滤器（Filter）方式。

  • envMap.encoding = THREE.LinearEncoding: 环境贴图的编码方式设置为线性编码。线性编码方式是指贴图颜色值的变化与实际颜色的变化是线性相关的，这对于渲染场景中真实光线的效果很重要。

  • envMap.minFilter = THREE.LinearFilter 和 envMap.magFilter = THREE.LinearFilter: 设置了环境贴图的过滤器方式为线性过滤器。过滤器指定了在纹理被缩放或拉伸时，如何从多个纹理像素中进行插值以产生新的纹理像素。在这种情况下，线性过滤器指定使用线性插值方法，即将多个像素的值进行加权平均。

这些设置可以保证贴图的显示效果更加准确和真实，并减少可能出现的锯齿和失真等问题。