Day and night textures at the same time

[snshn]

Is your feature request related to a problem? Please describe. Based on your solar-terminator example, I'm trying to make the globe feature two textures: one of the day Earth, and one of the night.

Describe the solution you'd like Some way to pass earth-blue-marble.jpg as a texture for

            .tileMaterial(() => new THREE.MeshLambertMaterial({
                color: '#ffff00',
                opacity: 0.2,
                transparent: true,
            }))

while keeping earth-night.jpg as the primary texture of the globe.

Describe alternatives you've considered Somehow making a second set of tiles rotate on the opposite side of the planet simultaneously with the solar one.

Additional context

[vasturiano]

@snshn that's an interesting idea, thanks for mentioning it.

It's certainly doable to load an image as the tile by setting the map property of your material to an image texture (previously loaded using TextureLoader).

What will be more challenging is to crop/translate the image to be the right frame so that it aligns perfectly with the sun position on the globe, particularly when the sun is not directly facing the equator (which really only happens on equinox).

[snshn]

Hi Vasco, thank you for the fast response.

Sounds tricky... not a math magician, but will try to pull it off, thank you for the hint!

Alternatively, is there any way to assign multiple textures to the globe, revealing one of them and hiding the other when it's behind the lit area? Not sure if THREE.js can do that, but if it can, I could leverage the already existing texture stretching mechanism.

Love the library... dream come true, thank you for creating it!

[vasturiano]

@snshn you can access and assign a new material to the globe via the method .globeMaterial. If there's a way in ThreeJS to assign multiple textures to a material (and possibly show/hide them using alphaMap), your idea may work out. 👍

[snshn]

Found related questions on StackOverflow:

• https://stackoverflow.com/questions/16287547/multiple-transparent-textures-on-the-same-mesh-face-in-three-js
• https://stackoverflow.com/questions/49533486/combine-materials-textures-with-alpha-maps

Seems like it should be possible to accomplish using simple shader combined with custom blending. Will post my solution here once it's working.