Three.js 中用于 HDR 照明的场景范围 envmap答案

【问题标题】：Scene-wide envmap for HDR lighting in three.jsThree.js 中用于 HDR 照明的场景范围 envmap
【发布时间】：2021-01-21 04:32:47
【问题描述】：

我想尝试为我的照明使用 HDR 图像。我试过做

var envmap = new THREE.TextureLoader().load( "./assets/wooden_lounge_1k.hdr" );
scene.environment = envmap;

但我场景中的所有对象都是黑色的。我看过一些演示，但他们通常在材质中为单个对象设置 envmap 属性，但我希望将 HDR 照明应用于场景中的所有对象。

我该怎么做？

谢谢！

【问题讨论】：

标签： three.js

【解决方案1】：

我找到了一个 JSFIDDLE 网站，其中包含一些可以帮助我的代码。它使用了 RGBELoader，但它有一些额外的东西。

我做了什么：

function setLighting(){

    new RGBELoader()
        .setDataType( THREE.UnsignedByteType )
        .setPath( 'https://threejs.org/examples/textures/equirectangular/' )
        .load( 'royal_esplanade_1k.hdr', function ( texture ) {

        var envMap = pmremGenerator.fromEquirectangular( texture ).texture;

        scene.background = envMap;
        scene.environment = envMap;

        texture.dispose();
        pmremGenerator.dispose();
    })
    var pmremGenerator = new THREE.PMREMGenerator( renderer );
    pmremGenerator.compileEquirectangularShader();

}

【讨论】：

【解决方案2】：

var envmap = new THREE.TextureLoader().load("./assets/wooden_lounge_1k.hdr");

您必须使用THREE.RGBELoader（而不是THREE.TextureLoader）加载HDR 纹理。我建议您研究以下官方示例以获取更多信息：

https://threejs.org/examples/webgl_loader_texture_hdr

【讨论】：

当我这样做时，我的 3d 模型只是金属的，我看不到纹理。为什么会发生这种情况？
可能是因为材质设置不好。有没有机会分享一个展示您当前工作进展的实例？
我意识到这是因为我使用了正交相机。当我使用它时，纹理消失了。这是我的问题：stackoverflow.com/questions/65821295/…

【解决方案3】：

输入THREE.RGBELoader 而不是THREE.TextureLoader

我认为你应该粘贴这个：

var envmap = new THREE.RGBELoader().load( "./assets/wooden_lounge_1k.hdr" );
scene.environment = envmap;

我希望它有效

【讨论】：

当我这样做时，我的 3d 模型只是金属的，我看不到纹理。为什么会发生这种情况？