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

- 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