如何在 three.js 中仅在黑暗区域制作 emissiveMap 光照？

Question

使用 three.js，我用纹理渲染地球。我还添加了一个发光纹理来添加城市灯光。但是我有一个问题，即使是地球的光区也会发出城市的光。

示例：

是否可以只在黑暗区域渲染自发光纹理光照？我没有找到任何方法。

我的贴图是这样设置的：

material.emissiveMap = loader.load('../assets/earth-light.png');
material.emissiveIntensity = 0.005;
material.emissive = new THREE.Color(163, 169, 133);

Answer 1

在我最初发表评论后，我一直在思考这个问题。我认为有一个解决方案。渲染完地球后，您可以在 a separate layer 中渲染城市灯光。图层让您可以使用互不影响的分隔灯光进行单独的渲染过程。

考虑到这一点，与其让城市发光，不如让它们反射从太阳另一侧发出的第二道光。

第 1 层渲染：

阳光
具有地球纹理的球体

第 2 层渲染：

太阳对面的光
另一个带有城市纹理的球体

你的城市 material 看起来像这样：

const cityOutlines = loader.load('../assets/earth-light.png');

const citiesMaterial = new THREE.MeshLambertMaterial({
    transparent: true,
    alphaMap: cityOutlines,
    color: new THREE.Color(163, 169, 133),
    depthTest: false,                   // So it doesn't z-fight the main Earth sphere
    blending: THREE.AdditiveBlending    // Lights are additive
});

这个 material 可以从太阳的另一面照亮。加法混合，黑色得不到光的部分会看不见，亮的部分会发光。

要查看正在运行的层以及如何设置它们，请访问 this demo in the Three.js website。您可以通过单击 < > 图标查看源代码。

如何在 three.js 中仅在黑暗区域制作 emissiveMap 光照？

How to make emissiveMap lighting only in dark areas in three.js?

javascript

textures

three.js