I've added gui options for my globe to change textures but I get the error "TypeError: Attempted to set a non-object key in a WeakMap" I think the error is related to the textures I'm using. what can I do to fix the gui error?
here is my code:
const gui = new GUI();
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 = {
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;
child.material.map = textureLoader.load("//unpkg.com/three-globe/example/img/earth-blue-marble.jpg");
}
});
};
gui
.add(parameters, "Theme", {
day: 0,
night: 1,
basic: 2,
dark: 3,
})
.onFinishChange(() => {
updateAllMaterials();
});
gui.open();
const elem = document.getElementById("globeViz");
const globe = Globe()
.globeImageUrl(
parameters.Theme
)(elem)
//.globeMaterial([MeshPhongMaterial])