Splines / curves wrapped around sphere

Hi there,

I am new to three.js and try to recreate the look of this image:

The result should be a sphere with lines from the north to the south pole. There should be multiple lines running, these lines should “bend” towards “dots” like magnets.

These dots (“magnets”) should sloooooowly move around the sphere and the lines should adjust accordingly. Also some dots should have a stronger effect on the bending of the lines than others. The bigger the dots, the more it should effect the lines.

My idea was to create lines / splines, evenly spread, running from the north to the south pole which then will be bend by randomly positioned dots. I thought of using bezier curves, but maybe there are other kind of curves that work better?

My main question now is how can I create splines that are “on top” of the sphere, like they were painted on it?
What approaches could I take? Or are there any other suggestions on how to recreate this sphere?

Thanks a lot!

One approach is to draw them on a texture. However, you might get issues with line pixelization.

Another approach is:

  • have the spline’s control points on a sphere
  • generate the points of the curve – they will be slightly inside the sphere, this will be fixed in the next step
  • move the points on the sphere – by setting their distance to the center of the sphere

As I am extremely sleepy, I made a quick demo, not exactly what you ask for, but just some curves on a sphere. They are not spline curves, so spend much time searching splines in the code.



A third approach is to adjust the vertex shader, so that it automatically pushes the points on the sphere. The demo above does this in JS, not in a shader.


Oh wow, thanks a lot. Just insane with what you come up in that short time. Really appreciate it.

To be honest I am a bit overwhelmed with the difficulty, I will try to understand the code as much as possible. In the meantime, could I ask how you would approach the idea with the “magnets” or how to come from here to the finale image? I guess it would look really nice if the lines don’t move forward but are instead animated to bend in slightly different ways.

Thanks again!

May be with splines or Bezier curves or NURBS curves + careful management of control points. It will take some time and a lot of juggling with all the parameters, until you reach something that you like.

Here is how Bezier curves may get attracted: