Article original : Create a Cute Room Portfolio with Three.js, Blender, JavaScript

Apprenez à utiliser Three.js et Blender pour concevoir un portfolio 3D époustouflant et interactif !

Nous venons de publier un cours sur la chaîne YouTube de freeCodeCamp.org qui vous fera passer des concepts fondamentaux de la modélisation 3D dans Blender à la création d'un site web de portfolio entièrement fonctionnel et digne d'un prix en utilisant Three.js.

Vous maîtriserez des techniques essentielles telles que la topologie quad appropriée pour des modèles propres et le baking de textures pour optimiser votre scène pour le web.

À la fin, vous aurez un projet Three.js charmant, mignon et déployé professionnellement, présentant toutes vos créations modélisées à la main. Andrew Woan a développé ce cours.

Voici toutes les sections de ce cours :

  • Introduction et démo du projet

  • Ce que nous allons couvrir et ne pas couvrir

  • À quoi s'attendre pour la structure du cours

  • Prérequis

  • Un bref aperçu de la topologie quad

  • Modélisation de la base de la pièce et aperçu du blocking out

  • Modélisation du bureau debout

  • Modélisation du support d'écran

  • Modélisation de l'ordinateur

  • Modélisation du tapis de bureau

  • Modélisation du clavier d'ordinateur

  • Modélisation des crayons et du pot à crayons

  • Modélisation du pot de fleurs et des fleurs

  • Modélisation d'un petit objet de citation de motivation

  • Modélisation de l'enceinte d'ordinateur

  • Modélisation du casque et du support de casque

  • Ajustement de la pièce

  • Modélisation de l'ordinateur

  • Modélisation du personnage mignon Mr. Whiskers

  • Modélisation de la tasse à café

  • Modélisation de la chaise

  • Modélisation du tiroir

  • Modélisation du livre

  • Modélisation du panier de fleurs

  • Modélisation du panneau perforé (pegboard)

  • Modélisation du cadre photo

  • Modélisation des chaussons

  • Modélisation des boîtes de rangement

  • Modélisation de la plante suspendue

  • Modélisation du piano

  • Modélisation de la fenêtre

  • Modélisation du microphone

  • Modélisation du tapis en forme d'œuf

  • Modélisation de la lampe

  • Modélisation d'autres étagères flottantes

  • Modélisation des post-its

  • Modélisation de la peluche boba

  • Ajout de détails supplémentaires au piano

  • Modélisation des logos

  • Modélisation de l'horloge

  • Modélisation de la mini table

  • Modélisation de la pizza

  • Modélisation de la canette de soda

  • Modélisation d'une autre plante suspendue mais avec un système de particules

  • Modélisation des œufs

  • Modélisation de la prise murale

  • Ajout et travail avec les maillages de texte (text meshes)

  • Modélisation des suspensions et de l'ampoule

  • Modélisation des planches de parquet

  • Modélisation des câbles

  • Modélisation des bordures de la pièce (room caps)

  • Une introduction à l'éclairage et aux matériaux

  • Création du premier matériau procédural comme exploration de design

  • Création du premier matériau procédural final avec les mathématiques vectorielles

  • Quelques conseils supplémentaires pour le baking

  • Vérification de l'orientation des faces/normales

  • Matériau de verre et modélisation de poissons

  • Introduction au baking

  • UV Unwrapping pour le baking de textures

  • Rendu d'une image à partager !!!

  • Commencer le baking

  • Analyse et ajustement des bakes et préparatifs pour l'exportation

  • Exportation et analyse

  • Configuration d'un starter Three.js de base avec Vite.js

  • Compression du modèle et des textures

  • Retour à la configuration

  • Configuration des chargeurs (loaders) et chargement des éléments

  • Ajustements du matériau et de l'apparence de la pièce

  • Matériau de verre

  • Matériau d'eau et de bulles

  • Matériau d'écran

  • Définition de la position initiale de la caméra et de la cible d'OrbitControls

  • Préparation des interactions raycaster et ajustements du modèle/texture dans Blender

  • Ajustement UV et peinture de texture pour corriger rapidement les erreurs de baking

  • Push sur GitHub et déploiement avec Vercel

  • Animation des ventilateurs

  • Interactions clic/toucher avec le raycaster

  • Modale de base avec des animations GSAP

  • (Optionnel) Chargement de polices personnalisées et astuces SCSS

  • Interaction de survol (hover) avec le raycaster et GSAP

  • Personnalisation d'OrbitControls pour limiter le panoramique et la rotation

  • Animations d'introduction avec GSAP

  • Tutoriel sur l'écran de chargement personnalisé

  • Un bref aperçu de l'audio avec Howler.js

  • Définition d'une position de caméra initiale pour le responsive

  • Dernier push sur GitHub !!!

  • Commentaires finaux, directions futures/défis, remerciements

Regardez le cours complet sur la chaîne YouTube de freeCodeCamp.org (9 heures de visionnage).