Net (polyhedron)

I need to make net (polyhedron) in three.js. I don’t know if I call it right (non-native english) but here are some links of what I am talking about on wikipedia and this app cabri. And here is demo of how it should look like on youtube. I need exactly the same and most important thing is to make edges snap, to behave like magnet at specific angle.

I am not asking for ready to use solutions but maybe what tools should I use, how you would implement it in general and some links where I can read about it. I’ve been digging it up for weeks now but I am not very good at geometry so I don’t know where to look. I would appreciate any help.Screenshot from 2020-01-06 10-08-21

When I started with three.js, I did something like this. But with Geometry, now I would do it with BufferGeometry. But you can take some of it over.

I did it for a german forum back then, therefore german identifiers and comments. But the few words can be translated easily.

You can find it in the Collection of examples from .

Directly here


another links
Problems with creating custom polyhedron geometry

something else found again
Does three.js supports FK (forward kinematics) and IK (Inverse kinematics)?

@hofk thanks for helping. Links you attached were really helpful. Still didn’t solve it but I know where to look now at least :slight_smile:

With the cube it is quite simple, because the rotation is only about the coordinate axes.

With the tetrahedron and other forms it is more complicated. You must also turn around any straight line. There are several possible solutions. You can use vectors from three.js. I prefer an invoice with the components. This is a personal decision.

One imagines a circle impaled on the straight line. And at right angles.
The unit direction vector of the straight line is the normal vector n of the circular plane.

With this you can easily calculate an orthonormal system. You get e1 and e2.
In the sketch the vector n is not shown.


You get the circle representation.


// phi in radians
// p point, m center point of circle, e1, e2 orthonormal vectors to the normal of the plane 

xp = xm + Math.cos( phi ) * r * xe1 + Math.sin( phi ) * r * xe2; 
yp = ym + Math.cos( phi ) * r * ye1 + Math.sin( phi ) * r * ye2;
zp = zm + Math.cos( phi ) * r * ze1 + Math.sin( phi ) * r * ze2;

Good luck :slightly_smiling_face:

1 Like

@hofk thank you very much! I will try it out :slight_smile: