本站会放置Google广告用于维持域名以及网站服务器费用。
感谢大家访问本站，希望本站的内容可以帮助到大家！
问题反馈可发送邮件到stubbornhuang@qq.com
工资「喂饱肚子」，副业「养活灵魂」！
欢迎大家交换友链，可在https://www.stubbornhuang.com/申请友情链接进行友链交换申请！
计算机图形学与计算几何经典必备书单整理，下载链接可参考：https://www.stubbornhuang.com/1256/
在本站开通年度VIP，无限制下载本站资源和阅读本站文章
如果觉得本站的内容有帮助，可以考虑打赏博主哦！
本站由于前段时间遭受到大量临时和国外邮箱注册，所以对可注册的邮箱类型进行了限制！

ThreeJS – 使用Hdr环境贴图作为间接光照对模型进行渲染

StubbornHuang ThreeJS 发布于2022-09-08 阅读 7,729次 0次评论 4次点赞本文共2790个字，阅读需要7分钟。

1 环境贴图

环境贴图（Environment Map）看起来像是从场景中对象的角度拍摄的环境全景照片，水平方向覆盖360度，垂直方向覆盖180度或360度。环境贴图的作用类似于对象周围一般照明环境的描述，通常用于以低成本渲染反射或者处理间接光照。

2 HDR

HDR（High Dynamic Range Imaging），又称高动态范围成像，是用来实现比普通数位图像技术更大曝光动态范围的一组技术。HDR的目的是正确地表示真实世界中从太阳光直射到最暗的阴影的范围亮度，其可以提供更多的动态范围和图像细节。

在计算机图形学与电影摄影术中，HDR是用来实现比普通数位图像技术更大曝光动态范围（即更大的明暗差别）的一组技术。高动态范围成像的目的就是要正确地表示真实世界中从太阳光直射到最暗的阴影这样大的范围亮度。

3 基于three.js，将Hdr作为环境贴图实现对3D模型加载与渲染

3.1 three.js版本，3D模型与HDR下载地址

three.js版本

本次实验使用three.js r144版本，是写本文时目前最新的three.js版本

3D模型

模型地址：https://sketchfab.com/3d-models/model-47a-loggerhead-sea-turtle-c438e81e796d41d9a6ae4cc147ef8d4f

hdr

hdr地址：https://polyhaven.com/a/rainforest_trail

Tone mapping

本次实验使用的Tone mapping算法为Academy Color Encoding System（ACES），具体的Tone Mapping算法的介绍可参考：Tone mapping进化论

3.2 代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>three.js hdr envmap test</title>
    <style type="text/css">
        html,body {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="js/three.js-r144/build/three.js"></script>
    <script src="js/three.js-r144/examples/js/loaders/GLTFLoader.js"></script>
    <script src="js/three.js-r144/examples/js/loaders/RGBELoader.js"></script>
    <script src="js/three.js-r144/examples/js/controls/OrbitControls.js"></script>
    <script>
        let scene,camera,renderer,controls

        function init() {
            // 创建绘制上下文
            renderer = new THREE.WebGLRenderer({
                antialias:true,
                //alpha:true
            });
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.gammaOutput = true;
            renderer.shadowMap.enabled = true;
            renderer.toneMapping = THREE.ACESFilmicToneMapping;
            renderer.outputEncoding = THREE.sRGBEncoding
            renderer.toneMappingExposure = 2.2;
            document.body.appendChild(renderer.domElement)

            // 创建场景
            scene = new THREE.Scene();
            //scene.background = new THREE.Color(0xFFdddd);

            // 加载hdr
            const hdrUrl = './res/hdr/rainforest_trail_4k.hdr'
            new THREE.RGBELoader().load(hdrUrl, texture => {
                 const gen = new THREE.PMREMGenerator(renderer)
                 const envMap = gen.fromEquirectangular(texture).texture
                 scene.environment = envMap
                 scene.background = envMap

                 texture.dispose()
                 gen.dispose()
            })


            // 创建摄像头
            camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,5000);
            camera.position.set(0,30,30);
            controls = new THREE.OrbitControls(camera,renderer.domElement);


            // 加载3D模型
            new THREE.GLTFLoader().load('./res/3dmodel/scene.gltf', result => {
                model = result.scene.children[0];
                model.position.set(0,-5,-5);
                model.traverse(n => {
                    if ( n.isMesh ) {
                        n.castShadow = true;
                        n.receiveShadow = true;
                        if(n.material.map)
                            n.material.map.anisotropy = 1;
                    }
                });
                scene.add(model);
            });

            window.addEventListener( 'resize', onWindowResize, false );
        }

        function animate() {
            requestAnimationFrame(animate)
            controls.update()
            renderer.render(scene,camera)

        }

        init();
        animate()


        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );

        }

    </script>
</body>
</html>