Creative Web Development with Three.js and Blender – 3D Portfolio for Beginners

Ce tutoriel se distingue par sa qualité pédagogique exceptionnelle. Andrew Won adopte une approche progressive et très structurée, idéale pour les débutants. Il prend le temps d’expliquer les concepts fondamentaux de la modélisation 3D (navigation, transformations, primitives) et de la programmation Three.js (scène, caméra, rendu, interactions). L’accent mis sur la décomposition des modèles complexes en formes simples est particulièrement pertinent et facilite l’apprentissage. La présence d’exercices facultatifs encourage la pratique active et la consolidation des acquis. L’auteur insiste également sur le développement d’un état d’esprit de programmeur, en montrant comment aborder et comprendre des exemples de code difficiles, ce qui est rare et précieux. La rigueur scientifique est bonne : les explications sont claires, les démonstrations sont reproductibles, et le code source est fourni sur GitHub. Cependant, on peut regretter l’absence de références bibliographiques ou de sources externes pour approfondir certains sujets. La qualité des sources est donc limitée, mais le contenu est fiable et basé sur l’expérience professionnelle de l’auteur. L’adéquation entre le titre et le contenu est parfaite. En résumé, ce tutoriel est une ressource de grande valeur pour qui souhaite se lancer dans le développement web créatif, alliant théorie et pratique de manière exemplaire.

Le titre correspond parfaitement au contenu : le cours couvre bien la création d'un portfolio 3D avec Blender et Three.js, destiné aux débutants.

8/10

Tutoriel pratique très complet, structuré en chapitres, avec exercices intégrés. L'auteur est un professionnel reconnu (freelance, formateur). Les sources sont limitées mais le code source est fourni. La démarche pédagogique est rigoureuse et encourage l'autonomie.

• 00:00Introduction & project demo
• 01:58Prerequisites
• 02:16What is creative web development?
• 06:37Learning first steps with Blender
• 14:05(optional) Learning exercise - Think like a 3D artist
• 15:44Modeling tree (bad and good ways)
• 42:16Modeling character
• 1:16:33Starting materials
• 1:29:37(optional) Other things you can model
• 1:37:37Modeling ground & level
• 1:41:34Adding image textures for projects
• 1:51:35A look at modeling some paths
• 1:53:57A look at different cameras
• 1:59:03How I modeled my scene
• 2:09:04Adding text & signs
• 2:18:52Preparing to export: checking normals, deleting faces, etc.
• 2:27:47Export model
• 2:30:43Viewing exported model with three.js editor
• 2:33:43Starting coding with VS code
• 2:37:47Getting started with three.js
• 3:07:07(optional) Learning exercise - Make your camera move away
• 3:09:35Quality of life adjustments
• 3:19:50Loading & preparing our model
• 3:26:45Updating camera & lighting
• 3:48:33(optional) Learning exercise - Change a material color with three.js
• 3:51:48Object interactions with raycaster
• 4:18:22Character movement with GSAP
• 4:42:46Collision detection implementation & custom movement
• 4:59:30How to understand and approach difficult code from three.js examples
• 5:03:45Collision detection implementation & custom movement
• 5:29:31A look back on analyzing difficult code
• 5:31:02Code & scene cleanup
• 5:32:02Make camera follow player
• 5:35:27(optional) Learning exercises: loading screen, mobile movement, theme switcher
• 5:37:41Deployment with GitHub and Vercel
• 5:38:46Final words and thoughts

• Code source, crédits, corrections et fichier Blender — Référentiel GitHub contenant le code du projet, les crédits, les corrections et le fichier Blender.
• Site web du portfolio créé dans le cours — Démonstration en ligne du portfolio 3D réalisé dans le tutoriel.
• Scrimba – plateforme d'apprentissage interactif — Partenaire de la chaîne, mentionné comme soutien ; lien d'affiliation.
• freeCodeCamp News — Site de la chaîne freeCodeCamp, mentionné dans la description.
• freeCodeCamp — Organisation à but non lucratif derrière la chaîne.

• Documentation Three.js — Documentation officielle de Three.js, cohérente avec les concepts présentés.
• Documentation Blender — Documentation officielle de Blender, cohérente avec les techniques de modélisation.