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

Learn to build an immersive 3D portfolio website by combining Blender 3D modeling with Three.js web development in this comprehensive beginner-friendly course. Start by mastering Blender fundamentals including 3D modeling techniques for creating trees, characters, environments, and scenes, while learning proper modeling practices, material application, and texture implementation. Discover how to prepare and export 3D models for web use, then transition to Three.js programming to bring your creations to life on the web. Master essential Three.js concepts including scene setup, camera controls, lighting systems, model loading, and interactive elements using raycaster for object interactions. Implement advanced features such as character movement with GSAP animation library, collision detection systems, and camera following mechanics to create a fully interactive 3D experience. Explore quality of life improvements, code optimization techniques, and learn how to analyze and understand complex Three.js example code. Complete the development process by deploying your finished 3D portfolio using GitHub and Vercel, with optional exercises covering loading screens, mobile movement controls, and theme switching functionality.

Syllabus

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