three LightProbeGenerator 光照探针生成器

LightProbeGenerator 是 Three.js 中用于生成 LightProbe 数据的工具。LightProbe 是一种用于实现基于图像的照明（Image-Based Lighting, IBL）的光照探针，通过环境贴图采集的光照信息为场景提供全局照明，使得物体在环境光下有更真实的光照和反射效果。LightProbeGenerator 帮助从立方体贴图（cube map）或球形贴图（equirectangular map）中生成这些光照探针信息。

LightProbeGenerator 有两个静态类方法

• fromCubeTexture ( cubeTexture : CubeTexture ) : LightProbe 从传入的（辐射）环境贴图创建一个光照探针。该方法期望将环境贴图表示为一个立方体纹理。

    let lightProbe;
    let directionalLight;
    // 设置光源和环境贴图的初始强度
    const lightProbeIntensity = 1.0;
    const directionalLightIntensity = 0.6;
    const envMapIntensity = 1;
    // 设置色调映射模式
    renderer.toneMapping = THREE.NoToneMapping;
    // 创建 LightProbe
    lightProbe = new THREE.LightProbe();
    lightProbe.intensity = lightProbeIntensity;  // 设置光探针的强度
    scene.add(lightProbe);
    // 创建方向光
    directionalLight = new THREE.DirectionalLight(0xffffff, directionalLightIntensity);
    directionalLight.position.set(10, 10, 10);
    scene.add(directionalLight);
    // 生成立方体贴图路径
    const genCubeUrls = function (prefix, postfix) {
        return [
            prefix + 'px' + postfix, prefix + 'nx' + postfix,
            prefix + 'py' + postfix, prefix + 'ny' + postfix,
            prefix + 'pz' + postfix, prefix + 'nz' + postfix
        ];
    };
    // 定义立方体贴图路径
    const urls = genCubeUrls('https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/master/examples/textures/cube/pisa/', '.png');
    // 加载立方体环境贴图
    new THREE.CubeTextureLoader().load(urls, function (cubeTexture) {
        scene.background = cubeTexture;  // 将立方体贴图设置为场景背景
        // 使用 LightProbeGenerator 从立方体贴图生成光探针数据
        lightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));
        // 创建几何体和材质
        const geometry = new THREE.SphereGeometry(5, 64, 32);
        const material = new THREE.MeshStandardMaterial({
            color: 0xffffff,
            metalness: 0,
            roughness: 0,
            envMap: cubeTexture,  // 应用环境贴图
            envMapIntensity: envMapIntensity,
        });
        // 创建网格并添加到场景
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        // LightProbe 的辅助工具
        const helper = new LightProbeHelper(lightProbe, 1);
        scene.add(helper);
    });

• fromCubeRenderTarget ( renderer : WebGLRenderer, cubeRenderTarget : WebGLCubeRenderTarget ) : LightProbe 从传入的（辐射）环境贴图创建一个光照探针。该方法期望将环境贴图表示为一个立方体渲染目标。 立方体渲染目标的 format 必须被设为 RGBA。

    // 创建立方体渲染目标，用于生成环境贴图
    const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);  // 创建一个256x256的立方体渲染目标
    // 创建一个 CubeCamera（用于渲染立方体环境贴图）
    const cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);  // 近远剪裁面分别为1和1000
    // 创建 LightProbe，用于照明探针
    const lightProbe = new THREE.LightProbe();
    scene.add(lightProbe);  // 将光探针添加到场景中
    // 创建环境贴图的 URL 生成函数
    const genCubeUrls = function (prefix, postfix) {
        return [
            prefix + 'px' + postfix, prefix + 'nx' + postfix,
            prefix + 'py' + postfix, prefix + 'ny' + postfix,
            prefix + 'pz' + postfix, prefix + 'nz' + postfix
        ];
    };
    // 定义立方体贴图路径
    const urls = genCubeUrls('https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/master/examples/textures/cube/pisa/', '.png');
    // 加载立方体环境贴图
    new THREE.CubeTextureLoader().load(urls, async function (cubeTexture) {
        scene.background = cubeTexture;  // 将加载的立方体贴图设置为场景背景
        cubeCamera.update(renderer, scene);  // 使用 CubeCamera 渲染场景，生成立方体环境贴图
        // 使用 LightProbeGenerator 从立方体渲染目标生成光探针数据
        const probe = await LightProbeGenerator.fromCubeRenderTarget(renderer, cubeRenderTarget);
        lightProbe.copy(probe);  // 将生成的光探针数据复制到现有的 LightProbe 中
        scene.add(new LightProbeHelper(lightProbe, 5));  // 使用 LightProbeHelper 可视化光探针

    });

以上两个示例中展示了光照探针辅助对象添加到场景中的效果，也侧面展示了探照应用在3D物体中的实际效果.