Sphere with clickable faces

Hi There,

I am trying to create a Three js Scene similar to below.

My goal is to achieve the following:

  1. Create a sphere with 9 triangular faces each having different image. Make sphere glow.
  2. Want to make each of the face clickable for highlighting/changing image on click.
  3. Have waves effect on performing drag action on screen

My attempt so far:
So far, i have created a transparent sphere with octahedron shape in it. However the effect is not close to what i want.

Any help/direction would be appreciated. Here is my attempted code:

var Circlegeometry = new THREE.SphereGeometry(20,32,32);
var Octahedrongeometry= new THREE.OctahedronGeometry(20, 0);
var Circlematerial = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0.5});

var Octahedronmaterial = new THREE.MeshNormalMaterial();
var Circle = new THREE.Mesh( Circlegeometry, Circlematerial );
var Octahedron = new THREE.Mesh( Octahedrongeometry, Octahedronmaterial );
scene.add( Circle );
Circle.add( Octahedron );

First of all, I strongly recommend using the BufferGeometry classes instead of the Geometry classes. Geometry will probably be deprecated pretty soon.

The Circle will intersect with the Octahedron in strange ways. What if you instead make it a CircleBufferGeometry that you position to lookAt the camera before every render? You will need a custom shader for the glow effect, something that alters color intensity and/or opacity depending on distance from the center. The glow effect will only be visible around the edge.

Hi @EliasHasle .Thanks for quick response. I have found some references for glow effect using shader glod (http://stemkoski.github.io/Three.js/Shader-Glow.html) . And i am planning to use them.

I did not get the part where you mentioned about using circlegeometry to achieve this. Is there any link that you can share as a reference? I have basic knowledge of Three.js .

I am sure there are many ways to achieve it. I noted, though, that you were using a sphere along with an octahedron. They have vertices placed at the same radius, but the faces do not align, and cannot be assumed to not intersect. Therefore, I suggested instead using a circle and making it always face the camera. Another option will be to use a larger sphere, large enough that the faces encapsulate all vertices of the octahedron. Then you will also be able to add effects in front of the whole surface of the octahedron as well as around.

For selecting the face the simplest method is using the raycaster.

There’s lots of examples of how to do this around the web, but if you get stuck then share your code here, preferably as a live example (e.g. codepen).

There’s lots of ways to achieve this, but the easiest might be post-processing. You can use Outline Effect for the glow (or perhaps bloom). I don’t think there’s any pre-built Wave effect, but it’s possible to write your own post passes and that’s a pretty simple effect. On the other hand, maybe you can find something on Google.

Alternatively stemkoski’s glow shader can give nice results and is very simple, but I’ve found that it works best when combined with a bloom pass (search this forum for ‘selective bloom’).

Note that post processing is expensive so if this needs to run in low power hardware it might not be suitable - although this is a pretty simple so it’s probably ok.

1 Like

Compare with this example @prisoner849 for a cylinder.
https://hofk.de/main/discourse.threejs/2018/selectingFaceindex/selectingFaceindex.html
from the collection https://hofk.de/main/discourse.threejs/2018/index2018.html

see Collection of examples from discourse.threejs.org

1 Like

Maybe makes sense to “explode” the sphere into meshes (one mesh is one triangle) to make it possible to use Outline Effect as this effect can work with whole meshes only (at least, I think so; correct me, if I’m wrong).