Design a three.js nautilus

1. Extension to 3D
   
2. Nautilus function
   

Now that we have mastered our subject, we are able to concentrate on the design of the nautilus. By interpolating supershapes around the spiral structure, we can create an infinite number of nautilus shapes.

Extension to 3D

We start by creating a supershape per subdivision of the spiral, to enrich the shape of the nautilus we can interpolate the parameters of this supershape at each step. We place each supershape at the center of its subdivision and orient it according to the tangent of the spiral at this given point.

Now that our structure is complete, we can create a mesh in order to apply a texture and a map of normals to our nautilus, these are the elements that will be taken into account when lighting. To avoid having to create a mesh from scratch, we simply wrap a plane around our structure. We need to match the subdivisions of our plane to those of our spiral and supershapes before replacing the position and normal values one by one.

Then, to give the nautilus its final appearance, we apply the texture and normal map of our choice on its mesh while an HDRI allows us to easily simulate natural light.

Finally, this study is not a tutorial. I mainly wanted to give some basics of trigonometry and transmit the idea that mathematics and more widely development can be used for creativity. If you want to reproduce this example with three.js, you will find all the sources of the project at the bottom of the page.

Nautilus function

– Downloads

• Github repository
• Photoshop textures and HDRI

↳ Procedural nautilus (three.js)

Thanks for reading so far, this is my first article, don't hesitate to contact me if you have any questions or comments.

I'm available to work and collaborate :),
follow me on Threads, Instagram or Github.

Leinestraße,
10049 Berlin

hbruvry@gmail.com
+33 (0)7 87 57 48 91