Hey everyone! Welcome back to another video. In this video, we will create a simple and cute three.js and Blender room portfolio!!!
*IMPORTANT* Make sure to go into 1) edit in the upper left corner 2) preferences 3) system 4) and switch to "CUDA" and enable your GPU if you've got one!
46:00 WOOPS, sorry haha! Accidental cut here, use the loop tools addon we installed and with those faces selected 1.) right click 2.) loop tools 3.) circle!
Live site: http://sooahs-room-folio.com/
Code, Blender file, fixes, updates, credits: https://github.com/andrewwoan/sooahkimsfolio
CHECK OUT THE BEST COURSE EVER: https://threejs-journey.com/
🥰🥰Support me ❤️❤️!!! OMG OMGOMG!
https://www.patreon.com/c/Pandawoan
https://ko-fi.com/andrewwoan
Won some awards!!! 🎉
https://www.awwwards.com/sites/suas-room-folio
https://www.cssdesignawards.com/sites/sooahs-room-folio/47040/
Questions, comments, concerns? Feel free to reach out at [email protected] or hit me up on Discord!! discord.gg/Qr3pQ925v7
❤️ Inspirations and credits ❤️:
Bruno Simon: https://my-room-in-3d.vercel.app/
Rachel Wei: https://rachelqrwei.ca/
Nicky Blender: https://www.instagram.com/nicky.blender/?hl=en
Denis Wipart: https://www.artstation.com/wipart
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 and Project Demo
0:50 What we will cover and not cover
1:38 What to expect for course structure
2:06 Prerequisites
2:55 Support the channel and me!!
3:24 A brief look at quad topology
5:02 Modeling room base and a look at blocking out
11:04 Modeling standing desk
17:50 Modeling monitor rise
21:08 Modeling computer
24:34 Modeling table pad
25:19 Modeling computer keyboard
31:36 Modeling pencils and pencil holder
33:33 Modeling flower pot and flowers
40:55 Modeling small motivational quote thing
44:05 Modeling computer speaker
46:40 Modeling headphones and headphone stand
58:12 Adjusting room
59:07 Modeling computer
1:13:54 Modeling cute character Mr. Whiskers
1:19:11 Modeling coffee mug
1:20:29 Modeling chair
1:30:38 Modeling drawer
1:33:31 Modeling book
1:36:19 Modeling flower basket
1:45:31 Modeling pegboard
1:52:01 Modeling photo frame
1:54:11 Modeling slippers
1:57:52 Modeling storage boxes
1:58:52 Modeling hanging plant
2:12:55 Modeling piano
2:20:36 Modeling window
2:26:32 Modeling microphone
2:30:16 Modeling egg rug
2:31:07 Modeling lamp
2:32:25 Modeling more floating shelves
2:33:45 Modeling sticky notes
2:33:58 Modeling boba plushie
2:36:42 Adding some more details to piano
2:37:03 Modeling logos
2:39:45 Modeling clock
2:41:09 Modeling mini table
2:42:09 Modeling pizza
2:46:33 Modeling soda can
2:49:30 Modeling another hanging plant but with particle system
2:57:39 Modeling eggs
2:58:08 Modeling wall outlet
2:59:55 Adding and working with text meshes
3:04:36 Modeling hanging lights and light bulb
3:09:34 Modeling floor planks
3:11:19 Modeling cords
3:12:11 Modeling room caps
3:15:45 An introduction to lighting and materials
4:06:46 Creating first procedural material as a design exploration
4:29:17 Creating final first procedural material with vector math
4:55:05 Few more tips for baking
4:56:19 Checking face orientations/normals
4:59:47 Glass material and modeling fish
5:00:45 Introduction to baking
5:06:13 UV Unwrapping for texture baking
6:03:24 Render out an image to share!!!
6:05:44 Start baking
6:24:47 Analyze and adjusting bakes and exporting preparations
6:39:45 Exporting and analysis
6:41:10 Setup basic three.js starter with Vite.js
6:44:39 Compressing model and textures
6:47:25 Back to setup
6:54:56 Setting up loaders and loading items
7:03:28 Room material and appearance adjustments
7:06:17 Glass material
7:09:05 Water and bubble material
7:12:36 Screen material
7:16:25 Setting starting camera position and OrbitControls target
7:18:31 Preparing for raycaster interactions and model/texture adjustments in Blender
7:21:48 UV adjusting and texture painting to quickly patch baking errors
7:28:26 Pushing to GitHub and deploying with Vercel
7:29:55 Animating fans
7:31:59 Raycaster click/touch interactions
7:40:59 Basic modal with GSAP animations
7:53:58 (Optional) Loading custom fonts and SCSS tips
8:00:52 Raycaster hovering interaction with GSAP
8:17:30 Customizing OrbitControls to limit pan and rotation
8:23:14 Intro animations with GSAP
8:34:46 Custom loading screen walkthrough
8:37:27 A brief look at audio with Howler.js
8:38:12 Setting a starting camera position for responsiveness
8:39:02 Final push to GitHub!!!
8:39:26 Final comments, future directions/challenges, shoutouts
#awwwards #threejs #blender3d