【3D】 threejs中使用hdr,设置背景和环境光效果
发布于 4 个月前 作者 qjzd 1703 次浏览 来自 码农

hdr

全称High-Dynamic Range, 即高动态范围,可以给3d场景添加背景,环境色。

给场景添加hdr可以给模型添加金属反射效果

获取hdr

https://hdrihaven.com

https://hdrihaven.com/hdri/?c=outdoor&h=sunset_fairway

核心代码

		import * as THREE from 'three' // 测试版本0.117.1
		import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

		var renderer = new THREE.WebGLRenderer()
		var scene = new THREE.Scene()
		...
		
		const pmremGenerator = new THREE.PMREMGenerator(renderer) // 使用hdr作为背景色
        pmremGenerator.compileEquirectangularShader()

        new RGBELoader()
          .setDataType(THREE.UnsignedByteType)
          .load('hdr/sunset_fairway_1k.hdr', function(texture) {
            const envMap = pmremGenerator.fromEquirectangular(texture).texture
            envMap.isPmremTexture = true
            pmremGenerator.dispose()

			// 这两个可以分开设置
			
            scene.environment = envMap  // 给场景添加环境光效果
			
            scene.background = envMap // 给场景添加背景图
          })

hdr效果

hdr-bg2.png

仅设置scene.environment效果

微信截图_20200703143417.png

回到顶部