使用带0粗糙度的GLTF输出的立方体，原则性BSDF材料不能在Three.js中正确显示

Question

我一直对我的搅拌机材料出现在three.js的问题。我经常看到的一个重要细节是GLTF格式对在Blender中导出节点设置的支持有限，最好坚持原则性的BSDF。但是，即使使用基本的BSDF设置(如下图所示)，创建一个粗糙度为0的灰色反射立方体，我也无法在three.js中看到任何反射效果(也见图)。

​

​

​

​

这是我的three.js场景：

import * as THREE from "three"
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js"
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"

(async () => {
    const gScene = new THREE.Scene()
    const canvas = document.querySelector("#c")
    const gRenderer = new THREE.WebGLRenderer({canvas})
    const gCamera = new THREE.PerspectiveCamera(50, canvas.clientWidth/canvas.clientHeight, 0.1, 1000)
    gCamera.position.x = 0
    gCamera.position.Y = 100
    gCamera.position.z = 20

    const controls = new OrbitControls(gCamera, canvas)
    controls.target.set(0,5,0)
    controls.update()

    const ambientLight = new THREE.AmbientLight(0xffffff, 40)
    gScene.add(ambientLight)

    const gltfLoader = new GLTFLoader()

    let scene = await new Promise((resolve, reject) => {
        gltfLoader.load('./scene.glb', (loadedGLB) => {
            resolve(loadedGLB.scene)
        })
    })
    gScene.add(scene)

    function resizeRendererToDisplaySize(renderer){
        const canvas = renderer.domElement
        const pixelRatio = window.devicePixelRatio
        const width = canvas.clientWidth * pixelRatio | 0
        const height = canvas.clientHeight * pixelRatio | 0 
        const needResize = canvas.width !== width || canvas.height !== height 
        if (needResize){
            renderer.setSize(width, height, false)
        }
        return needResize
    }
    function render(){
        if(resizeRendererToDisplaySize(gRenderer)){
            let canvas = gRenderer.domElement
            gCamera.aspect = canvas.clientWidth/ canvas.clientHeight
            gCamera.updateProjectionMatrix()
        }
        gRenderer.render(gScene,gCamera)

        requestAnimationFrame(render)
    }
    requestAnimationFrame(render)
})()

混合文件：https://drive.google.com/file/d/1rJXmlKuZsNXl3zRt8YqaB7nUamOfKRw3/view?usp=sharing

Answer 1

你可以通过添加一个HDR环境地图到你的场景中来实现你想要的目标。其思想是通过RGBELoader加载各自的纹理，用PMREMGenerator对其进行预处理，然后将其应用于Scene.environment。通过这样做，纹理将被设置为场景中所有PBR材料的环境映射。

我建议您查看存储库中的基本glTF示例，了解更多细节。还要确保使用相同的渲染器配置(意思是确保在sRGB颜色空间中工作，并使用色调映射)。

https://threejs.org/examples/webgl_loader_gltf