Learn how to use 3JS and Blender to design an amazing and interactive 3D portfolio!
We’ve just posted a course on the freecodecamp.org YouTube channel that takes you through the basics of 3D modeling in Blender. It will take you to create a fully functional, award-worthy portfolio website using JS. You’ll master essential techniques like proper quad topology for clean models and texture backing to optimize your scene for the web. By the end, you have three featuring all your handmade creations. JS will be a delightful, cute and professionally deployed project. Andrew Wayne developed this course.
Introduction and project demo
What we will cover and what we won’t cover
What to Expect for Course Structure
Conditions
Channel and help me!!
A brief look at quad topology
A look at the modeling room base and blocking
Modeling standing desk
Enhancements to the Modeling Monitor
Modeling computer
Modeling table pad
Modeling computer keyboards
Modeling pencils and pencil holders
Modeling flower pots and flowers
Modeling small incentive value
Modeling computer speakers
Modeling headphones and headphone stands
Adjusting the room
Modeling computer
Modeling the handsome character Mr. Whiskers
Modeling coffee mug
Modeling chair
Modeling drawer
Modeling book
Modeling flower basket
Modeling pegboard
Modeling photo frame
Modeling slippers
Modeling storage boxes
Modeling hanging plant
Modeling piano
Modeling window
Modeling microphone
Modeling egg rugs
Modeling lamp
Further modeling of floating shelves
Modeling sticky notes
Modeling Boba Alishi
Adding some more detail to the piano
Modeling logo
Modeling watch
Modeling Money Table
Modeling pizza
Modeling soda cans
Another hanging plant modeling but with a particle system
Modeling eggs
Modeling wall outlet
Adding and working with text meshes
Modeling hanging lights and light bulbs
Modeling floor boards
Modeling bone
Modeling room hats
Introduction to lighting and materials
The first method is to create content as a search for design
Creating the Ultimate First Methodology Material with Vector Arithmetic
A few more tips for baking
Face Orientation/Normal Check
Glass materials and modeling fish
Introduction to Baking
UV wrapping for texture baking
Submit a photo to share!!!
Start baking
Analyzing and adjusting backs and exporting preparations
Export and analysis
Basic three with Vite.js. js starter setup
Compressing models and textures
Back to setup
Configuring loaders and loading objects
Room content and appearance adjustments
Glass material
Water and bubble content
Screen material
Setting the launch camera position and OrbitControls target
Preparation of ray caster interactions and model/texture adjustments in Blender
UV adjust and texture painting to quickly patch baking errors
Push to GitHub and commit with Versal
Dynamic fan
Rycaster click/touch interaction
Basic modal with GSAP animations
(Optional) Loading custom fonts and SCSS tips
Raycaster is communicating with GSAP
Customizing OrbitControls to limit pan and rotation
Intro animations with GSAP
Custom loading screen walkthrough
A brief look at audio with Holler.js
Setting the initial camera position for the reaction
Last push to GitHub!!!
Final comments, future directions/challenges, shout outs
Watch the full course on the FreakudCamp.org YouTube channel (9 hour clock).