Upon further reflection, I have come up with a potential solution to the problem mentioned in my earlier comment. One approach would be to render city lights on a separate layer after rendering the Earth globe. By utilizing layers, you can create distinct render passes with isolated lights that do not interfere with each other.
Instead of making the cities emissive, consider having them reflect a second light source from the opposite side of the sun.
The rendering process involves:
- Rendering sunlight and the Earth texture on Layer 1
- Rendering light from the opposite side of the sun and the cities texture on Layer 2
Your city material could be defined as follows:
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,
blending: THREE.AdditiveBlending
});
This material would receive illumination from the opposite side of the sun. The use of additive blending ensures that areas without light will appear invisible, while illuminated parts will stand out.
To observe layers in action and learn how to implement them, check out this demo on the Three.js website. You can view the source code by clicking on the < > icon.