Create an Award-Winning Minecraft Portfolio with Three.js and Blender

A course on creating immersive three.js and Blender portfolios. It doesn't have to be minecraft themed at all! I highly recommend you apply what you know and create something amazing with different themes! Feel free to reach out if you have any questions! 🎉Won FWA of the day award!!!!! https://thefwa.com/cases/educational-minecraft-folio 🎉 Huge credits to Foxel MC for allowing me to use and be inspired for the Minecraft house build. Check Foxel out here!! https://www.youtube.com/@Foxel-mc. Other credits are listed on the website: http://woanminecraftfolio.com/. *** Code fixes and errors: https://docs.google.com/document/d/1kf8fQYJqNuVdxDONATYvsj0MesU6dYt23Y2XIOY8Ico/edit?usp=sharing Sorry for the bad audio quality for like an hour and 14 minutes at the start haha. Rest of the video should be okay, but was recording while I was sick for a large part of the tutorial so my voice is a bit off. Code: https://github.com/andrewwoan/woan-minecraft-folio If you wanna support me ❤️❤️❤️!! It's okay if you can't! Watching my videos means a lot to me as well 😊😊!!! https://www.patreon.com/Pandawoan https://ko-fi.com/andrewwoan Blender file: https://drive.google.com/drive/folders/1xrkCNELEefpR9clwLTjk-HQ2uRkQzaHy?usp=sharing Figma file: https://www.figma.com/design/7xlsNIWVgDUaKdyz05sa6N/Minecraft-Portfolio-(Copy)?node-id=0-1&t=pGyr0XlFfjcHIIQc-1 Chapters 0:00 Introduction & Project Demo 2:09 Prerequisites 3:30 Other tech we will use 4:10 Starting Blender import from Minecraft (optional) 5:17 Installing MCprep Blender Addon (optional) 6:06 Importing Minecraft world into Blender (optional) 8:01 Editing Blender scene (optional) 30:07 A quick look at UV unwrapping and baking (optional) 31:56 Analyzing and fixing models for baking (optional) 56:12 Revisitng UV unwrapping, normals, and baking (optional) 1:17:17 Adding text meshes (optional) 1:22:30 Adding our project meshes (optional) 1:25:16 Staring pig animation (optional) 1:25:16 Minecraft pig from SketchFab (optional) 1:31:36 Rigging pig (optional) 1:41:55 First keyframes for walk cycle (optional) 1:44:47 Revisiting animation using drivers instead (optional) 2:01:46 Baking with dynamic character tips (optional) 2:08:28 Check image textures and edit with Figma (optional) 2:11:27 Seperate and prepare objects for interactions/animations in the web 2:16:43 A look at glb and texture export methods (optional) 2:19:38 Organizing meshes and exporting 2:30:09 A look at alternative compression methods (optional) 2:32:05 Download KTX compression software 2:35:38 Starting KTX texture compression with command line 2:37:32 Using gltf-pipeline to split textures from models 2:39:35 Back to KTX compression 2:43:58 Starting coding with Vite bundler 2:41:29 Using gltfjsx to convert glb to JSX 2:47:31 Starting React Three Fiber scene and loading models 2:51:44 Extending useGLTF hook with custom KTX hook 2:57:05 Setting up scene and 3D experience 3:05:01 Fixing up model textures with custom function 3:13:05 Setting up skybox background 3:20:50 Playing model animations 3:21:55 Camera movement along curve and lerping rotations 4:10:36 Mouse move spatial awareness event listener 4:17:49 Fixing models for door animation and clickable 4:28:31 Pulsating materials based on scroll progress 4:43:29 Modals, global state with Zustand, and HTML/SCSS content 5:20:42 Creating custom pixel art SVGs with Figma 5:28:17 More modal styles and setup 5:45:38 Compress browser images to WebP using Squoosh 5:46:30 Back to SCSS 6:06:25 Adding audio effects and music, adjustments with Audacity 6:26:32 Custom loading screen 6:48:18 Preparing for release 6:48:30 Custom favicon using Figma 6:51:51 A brief look at HTML meta tags, open graph protocol 6:52:45 Analyzing bad code (code smells) 6:57:18 Pushing to GitHub & Deploy on Vercel 7:00:03 Final comments #threejs #portfolio #webdevelopment #3d #blender3d #minecraft #course #tutorial #programming