0

I am making my first steps learning to code in javascript and now I'm experimenting with webgl using three.js

The thing is that I am trying to find a starting point to make a cube that will slowly rotates in the x axe.

This cube will have 4 different textures (image and text), and if I click one texture, it would link me to a page or a site.

I find that make an interactive cube is easy. There is a lot of examples in the three.js site but what about make each side of that cube interactive?

Do you have some suggestion?

WestLangley
  • 102,557
  • 10
  • 276
  • 276
Valentin Verdegales
  • 183
  • 1
  • 17

1 Answers1

1
  1. Instead of having a box you can have 4 planes facing outwards and each of them will have a material with texture.
  2. Each of the planes will have an id
  3. There will be a list of what URLs are corresponding to each id
  4. Add onclick to the scene(basically it's converting X,Y of mouse to casting rays from camera) Detect clicked object in THREE.js

You can group them using an Object3D as a parent and then only rotate the parent.

Community
  • 1
  • 1
Pawel
  • 16,093
  • 5
  • 70
  • 73