Article original : Creative Web Development with Three.js and Blender

Apprenez le développement web créatif avec Three.js et Blender. freeCodeCamp vient de publier un cours accessible aux débutants qui vous apprendra à créer un portfolio 3D immersif.

Vous commencerez par plonger dans Blender pour apprendre les bases de la modélisation 3D. Une fois vos ressources 3D terminées, vous apprendrez Three.js pour intégrer vos modèles 3D sur le web. Andrew Woan a créé ce cours.

Voici les sections de ce cours :

  • Introduction et démo du projet

  • Prérequis

  • Qu'est-ce que le développement web créatif ?

  • Premiers pas avec Blender

  • (optionnel) Exercice d'apprentissage - Penser comme un artiste 3D

  • Modélisation d'un arbre (mauvaises et bonnes méthodes)

  • Modélisation d'un personnage

  • Débuter avec les matériaux

  • (optionnel) Autres objets que vous pouvez modéliser

  • Modélisation du sol et du niveau

  • Ajout de textures d'image pour les projets

  • Aperçu de la modélisation de chemins

  • Aperçu des différentes caméras

  • Comment j'ai modélisé ma scène

  • Ajout de texte et de panneaux

  • Préparation à l'exportation : vérification des normales, suppression de faces, etc.

  • Exporter le modèle

  • Visualisation du modèle exporté avec l'éditeur Three.js

  • Commencer à coder avec VS Code

  • Premiers pas avec Three.js

  • (optionnel) Exercice d'apprentissage - Faire reculer la caméra

  • Ajustements de confort (Quality of Life)

  • Chargement et préparation de notre modèle

  • Mise à jour de la caméra et de l'éclairage

  • (optionnel) Exercice d'apprentissage - Changer la couleur d'un matériau avec Three.js

  • Interactions avec les objets via le raycaster

  • Mouvement du personnage avec GSAP

  • Implémentation de la détection de collision et mouvement personnalisé

  • Comment comprendre et aborder du code complexe issu des exemples de Three.js

  • Implémentation de la détection de collision et mouvement personnalisé

  • Retour sur l'analyse de code complexe

  • Nettoyage du code et de la scène

  • Faire en sorte que la caméra suive le joueur

  • (optionnel) Exercices d'apprentissage : écran de chargement, mouvement sur mobile, sélecteur de thème

  • Déploiement avec GitHub et Vercel

  • Mots de la fin et réflexions

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