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

Code, Credits, Fixes, Updates & Blender File: https://github.com/andrewwoan/bellas-... Website: https://www.bellas-park.com/ 🥳Won an award 🎉!!    / @andrewwoan   I'm open for freelance/tutoring work! https://calendly.com/andrewwoan/virtu... If you wanna support me ❤️❤️❤️!! It's okay if you can't! Watching my videos means a lot to me 😊😊!!! Thanks for stopping by!   / pandawoan   https://ko-fi.com/andrewwoan 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! ❤️~ Check out these amazing courses ✨ (I'm not sponsored by them, but recommend them if you're just starting out)!! https://threejs-journey.com/ https://wawasensei.dev/ 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:50:54 A look at modeling some paths 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