How to make only the earth rotate without the background rotating？

[Diuyilu]

Situation

I use these code make my earth rotate:

const world = Globe()
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 1;

But I don't want my background rotate.

How should I implement it？

[vasturiano]

@Diuyilu if you want your background to be always static without moving, I'd suggest to just have a static image in a <div> underneath and overlay the globe element on top of that (with a transparent background on the globe itself).

[Diuyilu]

Thank you, I will try this implementation method！

[Diuyilu]

@vasturiano Do you have any specific code implementation? I tried the method you provided but it didn't work.

[Diuyilu]

@vasturiano Thank you, I just achieved this effect！My implementation method is as follows：

1. You need to first set a transparent background for the Globe(),I use backgroundColor('#FF000000')
2. You need to use z-index to set the stacking position of the earth and background

<div class="parent">
    <div id="globeViz" class="global"></div>
     <div id="background" class="background">
         <img class="backimg" src="./image/background.jpg">
     </div>
</div>
<script>
const world = Globe()
.backgroundColor('#FF000000')
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 1;
</script>
<style>
    .parent {
        position: relative;
    }

    .global {
        position: absolute;
        z-index: 2;
    }

    .background {
        position: absolute;
        z-index: 1;
    }

    .backimg {
        width: 100vw;
        height: 100vh;
    }
</style>

[clddup]

I also have the same need, but I don't want to achieve it by setting the div background.

[clddup]

Are there any other implementation schemes?