Exploring ruled surfaces with Three.js and Sketchfab

A ruled surface is a surface generated by moving lines in space, this means that for any point of the surface, you can always find a straight line on the surface passing by it. They go beyond mathematical objects, you can find them frequently in architecture. See my Pinterest board. I find that there is something harmonious and beautiful with ruled surfaces.

An example: hyperboloids

I think the most widespread example are the huge cooling towers of power plants. They are hyperboloids.


Look closer, do you see the lines on this surface? Think about how you could re-create it using strings:


And see this shape in 3d by clicking the image below (which is a reproduction of a sculpture in the city of Munich):

Generating ruled surface with Three.JS

I wrote some code to be able to generate ruled surface based on a set of curves: the code generates lines and triangles between those curves. For example, the previous model is simply generated by joining two circles with lines. To achieve this, I created a new geometry object for the Three.JS library: RuledSurfaceGeometry.js. This allowed me to generate many different shapes and to experiment, just by tweaking some parameters. This led to very interesting results:

Unfortunately, I did not find the time to write an editor to create the base curves, which means that you have to define their parameters manually, which can be quite mind twisting (see this file that contains many hardcoded shapes)

Exploring and sharing on Sketchfab

The code allows to download the surface un an .obj file, but also to directly upload it to Sketchfab, the platform to share 3d files.

Find all my ruled surface models in this Sketchfab folder.

Here are other real buildings that are ruled surfaces (click to see in 3D):