Three.js:基于图像的照明(IBL)

问题描述

我正在寻找将 IBL 添加到我的场景和对象中.但是我在网上找不到任何东西.有一些使用 envMap 的示例，但问题是使用 envMap 时，对象看起来像 chrome ...

I'm searching to add an IBL to my scene and objects. But I can't find anything on the web. There are some examples with an envMap, but the problem is that with the envMap the object looks like chrome...

我正在尝试产生这样的效果:

I'm trying to have such an effect:

我发现您可以使用 IBL(基于图像的照明)、PRT(预计算辐射传输)或 PBR(基于物理的渲染).但是我不知道如何在three.js中使用这种效果.

I found that you can use IBL (Image Based Lighting), PRT (Precomputed Radiance Transfer) or PBR (Physically Based Rendering). But I'm unable to know how to use such an effect with three.js.

使用来自 r74dev 的新 MeshStandardMaterial 后，我可以得到以下结果:(前)(后)

After using the new MeshStandardMaterial from the r74dev I'm able to have the following result:(before)(after)

但我不能将 MeshStandardMaterial 和 envMap 与纹理一起使用.纹理或 MeshStandardMaterial 都不起作用.

But I can't use MeshStandardMaterial and envMap with textures. Either the texture or the MeshStandardMaterial dooesn't work.

推荐答案

感谢 WestLangley 我正在使用 MeshStandardMaterial:

Thanks to WestLangley I'm using MeshStandardMaterial:

var objectGeometry = new THREE.SphereGeometry( 10, 100, 100 );  
material  = new THREE.MeshStandardMaterial({envMap : textureSkydome});

(r74dev)

这篇关于Three.js:基于图像的照明(IBL)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！