Hi,
I have a 3D sphere made of glowing or colored points, where the points are connected by lines forming a mesh (like a wireframe). I want to implement an interactive effect:
-
When the mouse hovers over a point, that point should be highlighted and slightly lifted from the sphere’s surface, like a small cone.
-
The lines connected to that point should also become visible and extend outward to create a 3D, protruding effect.
My question: What is the best approach in Three.js to implement this effect? Should I handle each point and its connected edges individually, or is there a more efficient method for this interactive behavior?
1 Like
I vote shader injection!
Should be < 20 lines of code or so…
If you have chatGPT ask it: I have a sphere in threejs using a wireframe material. Can you make me a function that injects functionality into its material via onBeforeCompile, to make the points on the sphere poke out when hovered over by the mouse?
You’ll have to add and update a “mouse_position” uniform for it.. in that onBeforeCompile… but I think gpt can figure it out… In fact, you could just paste my entire answer into gpt and it will probably figure it out just from that.
If the sphere is shown as a net of triangles, I’d try with indexed geometry and vertex colors. This should automatically address both updating the edges when a vertex is moved, and smoothing the colors if the active vertex has to be colored differently.
What do you think about noise? Is it possible to create this project by noise?
I need hover action on a sphere like this picture look at triangles and points moving:
1 Like
