Adding gui options to globe texture

Questions
, ,
1

I’ve added gui options for a globe texture but its not working properly, edit: it doesnt tell me anything in the console.
here is the globe:

Screenshot 2022-12-20 at 11.42.57
Screenshot 2022-12-20 at 11.42.571725×948 80.8 KB

here is my code:

import { GUI } from "./js/dat.gui.module.js";
// GUI
const gui = new GUI();

/* Textures */
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load("//unpkg.com/three-globe/example/img/earth-blue-marble.jpg");
const alphaTexture = textureLoader.load("//unpkg.com/three-globe/example/img/earth-night.jpg");
const normalTexture = textureLoader.load("//unpkg.com/three-globe/example/img/earth-day.jpg");

//const textureLoader = new THREE.TextureLoader();
const myTexture = [
  textureLoader.load("//unpkg.com/three-globe/example/img/earth-blue-marble.jpg"),
  textureLoader.load("//unpkg.com/three-globe/example/img/earth-night.jpg"
  ),
  textureLoader.load("//unpkg.com/three-globe/example/img/earth-day.jpg"),
  textureLoader.load(
    "//unpkg.com/three-globe/example/img/earth-dark.jpg"
  ),
];


const parameters = {
  GlobeTheme: 0,
};

const updateAllMaterials = () => {
  scene.traverse((child) => {
    if (
      child instanceof THREE.Mesh &&
      child.material instanceof THREE.MeshStandardMaterial
    ) {
      child.material = myTexture[parameters.GlobeTheme];
      child.material.needsUpdate = true;
      //child.material.map = textureLoader.load("//unpkg.com/three-globe/example/img/earth-blue-marble.jpg");
    }
  });
};

gui
  .add(parameters, "GlobeTheme", {
    day: 0,
    night: 1,
    basic: 2,
    dark: 3,
  })
  .onFinishChange(() => {
    updateAllMaterials();
  });

gui.open();

link to edit code: Glitch :･ﾟ✧