How to fix GUI options for Globe.gl

Questions
, , ,
1

Using globe gl trying to add gui to switch the globe texture between day and night theme, day theme is not working, please give me directions on how to fix this

Screenshot 2022-11-04 at 22.19.10
Screenshot 2022-11-04 at 22.19.101830×1404 149 KB

live demo:
https://shange-fagan.github.io/globe.news/

code:

    <head>
      <rssapp-wall id="tszZCksFzEB4w9UN"></rssapp-wall>

        <style>
        body {
          margin: 0;
        }
      </style>

    <script src="//unpkg.com/three"></script>

      <script src="//unpkg.com/globe.gl"></script>
       <!--  <script src="../../dist/globe.gl.js"></script>-->
      </head>

    <body>
        <div id="globeViz"></div>


      <script type="module">

        var my_awesome_script = document.createElement('script');
        my_awesome_script.type = 'text/javascript';
        my_awesome_script.async = true;
        my_awesome_script.setAttribute('src', 'https://widget.rss.app/v1/wall.js');
        my_awesome_script.style.background = 'transparent';
       my_awesome_script.style.objectFit= 'contain';
       my_awesome_script.style.position = 'static';
        // Gen random data
        const N = 30;
        const gData = [...Array(N).keys()].map(() => ({
          lat: 54, //latitude and longitude for london
         lng: -2,
       }));

        import { GUI } from './js/dat.gui.module.js';
         // GUI
  
    const gui = new GUI();
  
          const textureLoader = new THREE.TextureLoader()
          const myTexture = [
          textureLoader.load('//unpkg.com/three-globe/example/img/earth-dark.jpg'),
          textureLoader.load('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg'),
          ]
  
           const parameters = {
           Theme: 0
           }

           const updateAllMaterials = () => {
          scene.traverse( (child)=>{
          if(child instanceof Globe() && child.material instanceof          THREE.MeshPhongMaterial) {
                 child.material = myTexture[ parameters.Theme]
                 child.material.needsUpdate = true
             }
           })
           }

          gui.add(parameters, 'Theme', {
            night: 0,
         day: 1,
           }).onFinishChange(()=>{
            updateAllMaterials()
            })

		         gui.open();
    //Globe
         const elem = document.getElementById('globeViz');
         const globe = Globe()
        .globeImageUrl(parameters.Theme)
           .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')   
           .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
           .showGraticules(true)
           .showAtmosphere(true)
          .htmlElementsData(gData)
          .htmlElement(d => {
              return my_awesome_script;
           }
            )
          (elem);

           // custom globe material
           const globeMaterial = globe.globeMaterial();
           globeMaterial.bumpScale = 10;
           new THREE.TextureLoader().load('//unpkg.com/three-globe/example/img/earth-         water.png', texture => {
           globeMaterial.specularMap = texture;
           globeMaterial.specular = new THREE.Color('grey');
           globeMaterial.shininess = 15;
           });


    //Lighting
            setTimeout(() => { // wait for scene to be populated (asynchronously)
          const directionalLight = globe.scene().children.find(obj3d => obj3d.type === 'DirectionalLight');
         directionalLight && directionalLight.position.set(1, 1, 1); // change light position to see the specularMap's effect
          });
  
    //Globe rotate
            globe.controls().autoRotate = true;
            globe.controls().autoRotateSpeed = 0.85;

  
          //const animate = () => {
            //requestAnimationFrame(animate);
           //globe.rotation.y += 0.01;
           //}

           //animate();  
          </script>
     </body>