threejs-设置HDR环境贴图

最新推荐文章于 2024-09-26 17:01:51 发布

LIANG源

最新推荐文章于 2024-09-26 17:01:51 发布

阅读量1.5k

点赞数 7

文章标签：贴图

本文链接：https://blog.csdn.net/weixin_42959900/article/details/135669368

版权

文章目录

介绍

在Three.js中，HDR（高动态范围）渲染是一种渲染技术，其目的是提供更广泛的亮度范围和更准确的颜色表示，以更好地模拟真实世界的光照情况

更广泛的亮度范围： HDR允许场景中的亮度范围更广，可以包括非常明亮和非常暗的区域。传统的渲染技术可能在亮度极端值上失真，导致细节丢失或颜色变淡。HDR可以捕捉并呈现这些极端的亮度值，使图像更真实。
更准确的颜色表示： HDR使用浮点数格式来表示颜色，而不是常规的8位或16位整数。这使得它能够表示更多的颜色细节，尤其是在光照变化较大的情况下。这对于模拟光照、反射和折射等光学现象非常重要。
逼真的光照效果： HDR有助于实现逼真的光照效果，特别是在模拟光源的强烈辐射、高光和镜面反射时。这使得渲染的场景更接近于真实世界中的观察体验。

举个栗子：

在这里插入图片描述
这里添加了一个环境HDR，创建了一个立方体，材质粗糙度0，金属度1，可以清晰的反射出HDR的环境贴图。

代码实现

import * as THREE from 'three';
import { RGBELoader } from 'three/examples/jsm/Addons.js';

// 主要代码
const rgbeLoader = new RGBELoader();
rgbeLoader.load(
      '/path/你的hdr文件.hdr',
      (texture) => {
        const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
        pmremGenerator.compileEquirectangularShader();
        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
        // 设备为背景（也可以用其他的的场景背景）
        scene.background = envMap;
        // 设为场景中所有物理材质的环境贴图
        scene.environment = envMap;
        texture.dispose();
        pmremGenerator.dispose();
      },
      undefined,
      (error) => {
        console.error('Error loading HDR texture', error);
      },
    );