Créer un nautile avec three.js

  1. Extension en 3D
  2. Fonction du nautile

Maintenant que nous avons maîtrisé notre sujet, nous pouvons nous concentrer sur la conception du nautile. En interpolant des superformes autour de la structure en spirale, nous pouvons créer un nombre infini de formes de nautiles.

parametric-modeling-3a-supershape-interpolation

Extension en 3D

Nous commençons par créer une superforme par subdivision de la spirale, pour enrichir la forme du nautile nous pouvons interpoler les paramètres de cette superforme à chaque étape. Nous plaçons chaque supershape au centre de sa subdivision et l'orientons en fonction de la tangente de la spirale à ce point donné.

Maintenant que notre structure est complète, nous pouvons créer un maillage afin d'appliquer une texture et une carte de normales à notre nautilus, ce sont les éléments qui seront pris en compte lors de l'éclairage. Pour éviter de devoir créer un maillage à partir de zéro, nous enroulons simplement un plan autour de notre structure. Nous devons faire correspondre les subdivisions de notre plan à celles de notre spirale et de nos superformes avant de remplacer les valeurs de position et de normales une à une.

Ensuite, pour donner au nautile son aspect final, nous appliquons la texture et la carte normale de notre choix sur son maillage. Une HDRI nous permet de simuler facilement une lumière naturelle.

Enfin, cette étude n'est pas un tutoriel. Je voulais surtout donner quelques bases de trigonométrie et transmettre l'idée que les mathématiques et plus largement le développement peuvent servir à la créativité. Si vous souhaitez reproduire cet exemple avec three.js, vous trouverez toutes les sources du projet en bas de page.

Fonction du nautile

– Téléchargements

↳ Nautile procédural (three.js)

Merci d'avoir lu jusqu'ici, ceci est mon premier article, n'hésitez pas à me contacter si vous avez des questions ou des commentaires.

Je suis disponible pour travailler et collaborer :),
suivez-moi sur Threads, Instagram ou Github.

Aurikelstraat 24,
1032 AV Amsterdam

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

Back to top Arrow