gui调试环境贴图

上课是通过Blender，给展厅设置的.hdr格式环境贴图。

下面给大家演示，在threejs代码中，设置展厅环境贴图。

设置.hdr格式环境贴图

前面课程介绍过前面课程 (opens new window)介绍过hdr格式环境贴图加载，这里快速给大家演示一下。

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

把前面Blender生成的hdr贴图放到public文件夹，按照下面方式引入即可。

const rgbeLoader = new RGBELoader();
rgbeLoader.load('./envMap.hdr', (envMap) => {
    this.scene.environment = envMap;
    envMap.mapping = THREE.EquirectangularReflectionMapping;
})

异步写法

const rgbeLoader = new RGBELoader();
const envMap = await rgbeLoader.loadAsync('./envMap.hdr');
// 映射模式
envMap.mapping = THREE.EquirectangularReflectionMappi;
// 环境贴图作用于全部模型
this.scene.environment = envMap;

回顾：环境贴图反射率.envMapIntensity

基础课程 (opens new window)介绍过材质的换贴图反射率属性.envMapIntensity，通过.envMapIntensity可以改变环境贴图对场景的影响程度。

new THREE.MeshStandardMaterial({
    envMap: textureCube,
    envMapIntensity: 0.5,//环境贴图反射率
})

递归遍历设置所有模型的环境贴图反射率.envMapIntensity

twin.loader.load('./展厅.glb',function(gltf){
    gltf.scene.traverse(function (obj) {
        if (obj.isMesh) {
            obj.material.envMapIntensity = 0.5
        }
    })
})

gui可视化调节.envMapIntensity

下面通过dat.gui.js库，可视化改变环境贴图对模型影响程度，如果你对gui不太熟悉，可以看下基础课程 (opens new window)。

// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
// 实例化一个gui对象
const gui = new GUI()
// 可视化改变环境贴图对模型影响程度
gui.add({ envMapIntensity: 1.0 }, 'envMapIntensity', 0, 5)
.onChange( (v) => {
    gltf.scene.traverse(function (obj) {
        if (obj.isMesh) {
            obj.material.envMapIntensity = v
        }
    })
})