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

The video is an excellent, comprehensive tutorial for beginners interested in creative web development. The instructor, Andrew Won, demonstrates a strong command of both Blender and Three.js, and the course is well-paced, with clear explanations and practical demonstrations. The content is highly valuable for its target audience, providing a complete workflow from 3D modeling to web deployment. The argumentation is solid, as the instructor justifies each step and encourages a problem-solving mindset. The scientific rigor is appropriate for a tutorial, with accurate technical information and best practices. The sources cited are the official documentation and the instructor’s GitHub repository, which are reliable. The title accurately reflects the content. The course excels in its pedagogical approach, including optional exercises and tips for understanding complex code. However, it is not a substitute for in-depth study of either Blender or Three.js, and some advanced topics are covered briefly. The public comments are overwhelmingly positive, with viewers expressing gratitude and enthusiasm. The course successfully fulfills its promise of enabling beginners to create a unique 3D portfolio.

The title accurately reflects the content: a beginner-friendly course on creative web development using Three.js and Blender to build a 3D portfolio.

8/10

The course is well-structured, with clear explanations and practical exercises. The creator demonstrates expertise in both Blender and Three.js, and provides a complete project with source code. However, it is a tutorial, not a peer-reviewed source, and some advanced topics are covered briefly.

• 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

• Course GitHub Repository (Code, Credits, Fixes, Updates & Blender File) — The instructor provides the complete source code, Blender file, and updates for the course project.
• Course Website (Live Demo) — The instructor's live portfolio website, which is the final result of the course.
• freeCodeCamp News — freeCodeCamp's publication platform, which hosts related articles and tutorials.
• Scrimba (Sponsor) — Scrimba is a coding platform that sponsored the video, offering interactive learning.

• Three.js Documentation — The official Three.js documentation aligns with the techniques taught in the video.
• Blender Manual — The Blender manual provides comprehensive information on modeling and navigation, consistent with the video's instructions.

• www.freecodecamp.org