GIF/Video as backgroundImageUrl

[TheAksh]

Is your feature request related to a problem? Please describe. To achieve twinkling stars, I tried setting up a video as a background and setting Globe's backgroundImageUrl as transparent. But, that doesn't rotate with the Globe. Then, I tried converting the video to a GIF and setting it to backgroundImageUrl. But the GIF doesn't animate in that case.

Describe the solution you'd like Either provision videos to be used as backgrounds or let GIFs animate if specified as backgroundImageUrl.

[vasturiano]

@TheAksh you can access the scene directly via the component method .scene() (accessible via a ref), which will allow you to extend the scene with additional objects you'd like to have. For this case, you can add your own background, using a wide sphere representing the sky with a video texture.

[TheAksh]

  const globeEl = useRef();
  const video = useRef();
  useEffect(() => {
    //Get your video element:
    video.current.onloadeddata = function () {
      video.current.play();
    };
    //Create your video texture:
    const videoTexture = new THREE.VideoTexture(video.current);
    videoTexture.needsUpdate = true;
    const videoMaterial = new THREE.MeshBasicMaterial({
      map: videoTexture,
      side: THREE.FrontSide,
      toneMapped: false,
    });
    videoMaterial.needsUpdate = true;

    //Create screen
    const screen = new THREE.SphereGeometry(500, 32, 16);
    const videoScreen = new THREE.Mesh(screen, videoMaterial);
    let currentScene = globeEl.current.scene();
    currentScene.add(videoScreen);
  }, []);

return (
    <div className='col-6'>
      <video
        ref={video} autoPlay loop muted className='position-fixed w-100'>
        <source src={backgroundVideo} type='video/mp4' />
      </video>
      <Globe
        ref={globeEl}
        // backgroundColor='#0000'
        globeImageUrl='//unpkg.com/three-globe/example/img/earth-blue-marble.jpg'
        bumpImageUrl='//unpkg.com/three-globe/example/img/earth-topology.png'
        // backgroundImageUrl='//unpkg.com/three-globe/example/img/night-sky.png'
        pointsData={gData}
        pointAltitude='size'
        pointColor='color'
      />
    </div>
  );

I'm actually a little new to Three.js and this is what I've tried. I think I should do side: THREE.BackSide,. I'll spend some more time figuring out why it isn't working, but just wanted to share my approach.