Intro to Creative Web Development with Three.js and Blender | Create a 3D Portfolio for Beginners

Code & Blender File: https://github.com/andrewwoan/bellas-...
Website: https://www.bellas-park.com/
If you wanna support me ❤️!! https://ko-fi.com/andrewwoan
Anything means a lot, it'd be a dream to be full time creator!

Made this Crossy Road 🐔 inspired folio with a friend, thought I'd turn it into a full intro-level course for those looking to get into the creative web development field! No three.js or Blender experience required! Hopefully this video helps you get started into this awesome field. Obviously I'm biased, but creative web development has to be one of the best jobs in the world! You get to make so many cool things that make other people happy!! Definitely tag me when you create something! I'd love to see it and I'm sure many others will as well!

Thanks for stopping by and feel free to reach out if you have any questions! ❤️~

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

#threejs #blender3d #portfolio #webdevelopment