Is there a way to switch planet textures with a button click?

SCDavison · July 27, 2018, 7:39am

Hey, This is my fist post here, so please forgive me if I am asking too many questions. I am VERY new to three.js, and WebGL as a whole. Actually, I’m kinda new to JavaScript… there I said it.

But I am trying to put together a small project of planets. I ran across the discussion found here and it is almost exactly what I have been looking for.

I made a few edits to remove things that I don’t need/want, and have this (hopefully that fiddle shows up):

The first things I’d like to do is remove that loading screen, as well as the black background.
Then I want to be able to show the planet in a div/container so that I can add a different CSS background.

The last thing I’d like help on is that I will have a list of planets. I want to be able to click on a planet name and have the planet texture change based on whatever name is clicked.
What I have in mind is VERY close to what has been done here:
http://jeromeetienne.github.io/threex.planets/examples/select.html#Earth
and

github.com

jeromeetienne/threex.planets/blob/master/examples/select.html

<!DOCTYPE html>
<script src='vendor/three.js/build/three.min.js'></script>
<script src='../threex.planets.js'></script>
<div style='position:absolute'>
	<button onclick='switchValue(this.innerHTML);'>Sun</button>
	<button onclick='switchValue(this.innerHTML);'>Mercury</button>
	<button onclick='switchValue(this.innerHTML);'>Venus</button>
	<button onclick='switchValue(this.innerHTML);'>Earth</button>
	<button onclick='switchValue(this.innerHTML);'>Moon</button>
	<button onclick='switchValue(this.innerHTML);'>Mars</button>
	<button onclick='switchValue(this.innerHTML);'>Jupiter</button>
	<button onclick='switchValue(this.innerHTML);'>Saturn</button>
	<button onclick='switchValue(this.innerHTML);'>Uranus</button>
	<button onclick='switchValue(this.innerHTML);'>Neptune</button>
	<button onclick='switchValue(this.innerHTML);'>Pluto</button>
</div>
<body style='margin: 0px; background-color: #000000; overflow: hidden;'><script>
	var renderer	= new THREE.WebGLRenderer({
		antialias	: true
	});

This file has been truncated. show original

But I’m hoping there is a less verbose way of switching the planet textures in JS than using the else if statements.

I know I’m asking a lot, but I appreciate any and all help you all can provide.

Thanks.

trymoremore · July 27, 2018, 7:51am

you can switch the planet through modify the material of planet

Topic		Replies	Views
Threejs 3d earth + marker needs to be clickable Questions interaction	10	7588	December 11, 2019
How to switch out texture images on click using ImageUtils Questions textures , loaders	15	2627	February 19, 2020
Overlay page elements and change models / textures on click Questions getting-started	1	1036	March 19, 2019
How to switch between different globe textures using gui options Questions textures , materials , globe	0	743	November 26, 2022
Changing image texture using a selection of buttons Questions textures	2	1784	August 26, 2020

Is there a way to switch planet textures with a button click?

Related Topics