3D Globe Animated with Slider

Hi there,

I am new to Three.js, and I am currently working on a web project using vanilla JS and Three.js. The project requirements are as shown in the above image. There is a 3D globe, three range sliders where 0 is the default value in the middle, and an “Evaluate” button. There are eight possible combinations that we can generate from those sliders. For example, if you drag the first slider to the left corner, the second slider to the left corner, and the third slider to the right corner, you will generate a combination of three words. Once the third slider is dragged to the desired place, the corresponding part of the globe will be highlighted. When you click the “Evaluate” button, you will be redirected to a different page where more text details about the combination you have chosen will be shown. Do you have any ideas or suggestions on how we can implement this?

Thank you.