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>