如何在 Three.js 中使自发光地图照明仅在黑暗区域？

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

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

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

第 1 层渲染：

• 阳光
• 具有地球纹理的球体

第2层渲染：

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

你的城市材质看起来像这样：

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
});

这种材料可以从太阳的另一侧照射。通过additiveBlending，没有光照的黑色部分会看不见，而明亮的部分会发光。

要查看正在运行的图层以及如何设置它们，请访问 Three.js 网站中的此演示。您可以通过单击

< >

图标查看源代码。