Create a sphere with 9 triangular faces each having different image. Make sphere glow.
Want to make each of the face clickable for highlighting/changing image on click.
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.
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.
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).
