Create an Award-Winning Hand-drawn Papercraft Portfolio with Three.js, Blender, React, & Krita

Heyo!!!! 😊 This video covers how to create a handdrawn papercraft portfolio website with three.js, Blender, React, and Krita! We will be using React Three Fiber We'll create our own assets, use AI to speed up some of that boring work XD. This one isn't really handrawn compared to the panda one but lol; it was gonna be then I was like nawww let's do it differently XD. BTW I had to remove all the materials from the Blender file because I don't have a commercial license, but you can still use them for reference or the baked textures if you want to follow along, but I recommend creating your own scene and apply what you know! If you have any questions, comments or just wanna chat, feel free to reach out!! I'm up on Discord!! discord.gg/6F7dfuD5GT Live Site: https://aimees-papercraft-world.com/ Code, Credits, Inspiration, Blender File: https://github.com/andrewwoan/aimee-w... The other website mentioned: https://www.mr-pandas-psychologically... https://github.com/andrewwoan/mr-pand... Open for freelance work! Schedule a chat here: https://calendly.com/andrewwoan/virtu... Main website inspirations: https://www.joshuas.world/ https://bilal.show/ Textures used: https://southernshotty.gumroad.com/l/... UI Inspired By: https://github.com/wehwayne2 https://x.com/BeachSad2 Chatpers: 0:00 Introduction & Showcase 1:48 Prerequisites 2:29 (Optional) CALL OUT MY MISTAKES! 3:05 (Optional) COME JOIN US ON DISCORD!!!!! 3:16 High-level overview of asset creation for more advanced people 3:52 (Optional) Alternative drawing softwares 4:26 (Optional) Basic Krita Tutorial 9:15 (Optional) Exporting Image Assets from Krita 12:12 (Optional) Basic Blender scene modeling with textures 29:56 (Optional) Basic texture painting setup 35:02 (Optonal) More texturing/design talking 40:12 (Optional) Things I look for during baking large scenes 44:43 (Optional) What should I bake together? Intuition Development and Developer Experience. 49:05 (Optional) Adjusting my scene for baking 1:02:40 (Optional) Using AI to generate python script for Blender UV map creation 1:03:40 (Optional) Baking and unwraping tips with UVPackmaster and SimpleBake 1:12:47 DON'T FORGET TO CHECK FOR FACE ORIENTATION/NORMALS BEFORE BAKING 1:13:04 Back to baking stuff 1:19:20 (Optional) Asset preparation after done baking for development. 1:31:02 (Optional) Online optimizers and texture compression tools 1:33:26 (Optional) AI PowerShell/Bash Script and ImageMagick 1:38:57 (Optional) AI generated Blender scripting for naming conventions 1:40:35 (Optional) Exporting GLB Files 1:43:01 (Optional) FOR VIBE CODERS - basic coding setup 1:47:07 (Optional) FOR VIBE CODERS - multi-page vs single-page applications 1:50:04 (Optional) FOR VIBE CODERS/NEWER DEVS - project architecture explanation 1:54:44 (Optional) FOR NEWER DEVS - Basic coding setup - see commit to bypass time 1:59:58 Preparing GLB files for the web using custom Node.js script, AI, and gltfjsx 2:08:09 Notes on loading models and analyzing script faults 2:11:23 (Optional) Switching to WebGPU renderer, I never end up using it lol 2:14:58 Switching to flat on Canvas and analyzing loaded models 2:19:07 Pushing to GitHub and Deploying with Vercel 2:20:24 Making Blender adjusments and more tips with JSX, models, and workflow 2:30:34 Moving camera along curve, preparing curves in Blender 2:45:56 AI generated Blender addon to export curves 2:46:25 Using ScrollTrigger and Lenis to move our camera along a curve 3:06:56 Upgrading scrollProgress to global store with Zustand 3:16:05 Basic camera offset formula 3:18:11 Changing from ScrollTrigger to only Lenis 3:22:59 Basics of lerping and implementing linear interpolation for smooth camera movement 3:28:40 Implementing camera offset 3:39:43 Moving models along curve 3:50:21 Basic cross product formula for rotation orientation along curve 3:55:12 Character moving fixes, updates, and looping 4:07:15 Animating characters popping in and out with GSAP 4:17:40 Fixing infinite GSAP tween creation with IDs 4:19:18 Handling responsiveness 4:22:41 (Optional) Analyzing AI LLM coding and tips 4:27:59 (Optional) Cool idea - zoom slider 4:28:35 Fixing tapping camera offset on mobile/touch devices 4:29:00 (Optional) Note on useProgress with React Three Drei 4:29:34 (Optional) UI inspiration design 4:29:52 (Optional) Cool idea - make canvas smaller 4:30:18 (Optional) Cool idea - make an idle character 4:31:50 (Optional) Miscellaneous Random cool ideas to add 4:32:17 (Optional) Shoutouts!! 4:32:51 (Optional) Rambling, TAKE CARE AND PEACE OUT!!!