Créer un nautile avec three.js
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.
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.
