【Three.js基础学习】20.Environment map

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

课程回顾：

    模型的加载

    GLTFLoader

    环境贴图实现；

    CubeTextureLoader

    LDR:低动态范围

    backgroundBlurriness：设置背景模糊 (不生效 为什么?)

    backgroundIntensity: 设置背景强度，设置的是背景亮度 (不生效 为什么?)

    HDRI :  等距矩形环境贴图

    如何加载使用HDRI文件?

    RGBE ：红色 ，绿色 ，蓝色 ，指数：存储的是亮度 (重点)

    我们需要使用RGBELoader。"RGBE"代表"红绿蓝指数"，指数存储亮度

    这是“HDR”格式的编码。

    THREE.EquirectangularReflectionMapping // 等距型反射

    THREE.EquirectangularRefractionMapping // 折射透明

    HDRI 缺点

        文件加载渲染较大

    建议只对光照使用HDRI

    ?上面实现中有一个问题，如何解决环境贴图对模型的影响

    1.blender如何生成环境地图?

    在blender制作

    2.使用NVIDA Canvas生成环境地图

    https://www.nvidia.cn/studio/canvas/

        类型：exr后缀

        扩展名是.exr，而不是.hdr。我们导出的文件也是存储的颜色范围的“HDR”图像，但编码不同

        EXR还可以存储层，并具有alpha通道

   

    3. 环境贴图 (收费)

        https://skybox.blockadelabs.com/

   

    时间环境地图

    真实的光 ： 如何让甜甜圈模型 产生光?

        需要创建自己的立方体纹理，更textureLoad差不多，在每一帧中做处理；因此使用webgl立方体渲染器目标

   

    这个时候模型还是黑色

    需要一个特殊的相机。 如果想要渲染就需要一个相机进行拍摄

    WebGLCubeRenderTarget

    分成解决相机渲染，决定显示什么

    object.layers.enable(..)将添加一个图层

    object.layers.disable(...)将移除一个图层

    object.layers.set(...)将自动启用一个图层并禁用所有其他图层

一、代码

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
import { Mapping, Mesh } from 'three'


/* 
* Loaders
*/
const gltfLoader = new GLTFLoader()
const cubeTextrueLoader = new THREE.CubeTextureLoader()
const rgbeLoader = new RGBELoader()
const exrLoader = new EXRLoader()
const textureLoader = new THREE.TextureLoader()

/**
 * gui
 */
 const gui = new GUI()
 const global = {
 }

// Canvas
const canvas = document.querySelector('canvas.webgl')

/**
 * scene
 */
const scene = new THREE.Scene()
/*
    Updata all materials
*/
const updateAllMaterials = () => {
    scene.traverse((child)=>{ //  遍历
        if(child.isMesh && child.material.isMeshStandardMaterial){
            child.material.envMapIntensity = global.envMapIntensity
        }
    })
}

/* 
    environmentMap 环境贴图
*/
scene.backgroundBlurriness = 0
scene.backgroundIntensity = 1
// global intensity 
global.envMapIntensity = 1 // 环境贴图强度
gui
    .add(global,'envMapIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    .onChange(updateAllMaterials)
gui
    .add(scene, 'backgroundBlurriness')
    .min(0)
    .max(1)
    .step(0.001)
gui
    .add(scene, 'backgroundIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    

// LDR cube texture  环境贴图的实现
// const environmentMap = cubeTextrueLoader.load([
//     '/environmentMaps/2/px.png',
//     '/environmentMaps/2/nx.png',
//     '/environmentMaps/2/py.png',
//     '/environmentMaps/2/ny.png',
//     '/environmentMaps/2/pz.png',
//     '/environmentMaps/2/nz.png',
// ])
// scene.environment = environmentMap  // 可以实现场景中每一个网格材质对于场景起到作用
// scene.background = environmentMap // 将环境贴图应用到场景中


// HDR (RGBA) equirectangular
// rgbeLoader.load(
//     '/environmentMaps/测试hdr生成全景3.hdr',
//     (environmentMap)=>{
//         environmentMap.mapping = THREE.EquirectangularReflectionMapping
//         scene.background = environmentMap
//         scene.environment = environmentMap
//     }
// )

// HDR (EXR) equirectangular
// exrLoader.load('/environmentMaps/nvidiaCanvas-4k.exr',(environmentMap)=>{
//     environmentMap.mapping = THREE.EquirectangularReflectionMapping
//     scene.background = environmentMap
//     scene.environment = environmentMap
// })

// LDR equirectangular
// const environmentMap = textureLoader.load('') //没资源
// environmentMap.mapping = THREE.EquirectangularReflectionMapping
// environmentMap.colorSpace = THREE.SRGBColorSpace
// scene.background = environmentMap
// scene.environment = environmentMap

// Ground projected skybox
// rgbeLoader.load('/environmentMaps/1/little_paris_eiffel_tower_8k.hdr',(environme