If you’re ready to level up your developer portfolio, this course is for you.

You’ll use Three.js, Blender, and JavaScript to build an adorable portfolio that looks like a home office.

You’ll learn about quad topology, texture backing, modeling objects, and lots more.

https://freecodecamp.org/news/create-a-cute-room-portfolio-with-threejs-blender-javascript/…

Create a Cute Room Portfolio with Three.js, Blender, JavaScript

Source: https://www.freecodecamp.org/news/create-a-cute-room-portfolio-with-threejs-blender-javascript/ Learn how to use Three.js and Blender to design a stunning and interactive 3D portfolio!

We just posted a course on the freeCodeCamp.org YouTube channel that will take you from the foundational concepts of 3D modeling in Blender to creating a fully functional, award-worthy portfolio website using Three.js.

You’ll master essential techniques like proper quad topology for clean models and texture baking to optimize your scene for the web.

By the end, you’ll have a delightful, cute, and professionally deployed Three.js project featuring all your hand-modeled creations. Andrew Woan developed this course.

Here are all the sections in this course:

• Introduction and Project Demo
• What we will cover and not cover
• What to expect for course structure
• Prerequisites
• A brief look at quad topology
• Modeling room base and a look at blocking out
• Modeling standing desk
• Modeling monitor rise
• Modeling computer
• Modeling table pad
• Modeling computer keyboard
• Modeling pencils and pencil holder
• Modeling flower pot and flowers
• Modeling small motivational quote thing
• Modeling computer speaker
• Modeling headphones and headphone stand
• Adjusting room
• Modeling computer
• Modeling cute 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 rug
• Modeling lamp
• Modeling more floating shelves
• Modeling sticky notes
• Modeling boba plushie
• Adding some more details to piano
• Modeling logos
• Modeling clock
• Modeling mini table
• Modeling pizza
• Modeling soda can
• Modeling another hanging plant but with particle system
• Modeling eggs
• Modeling wall outlet
• Adding and working with text meshes
• Modeling hanging lights and light bulb
• Modeling floor planks
• Modeling cords
• Modeling room caps
• An introduction to lighting and materials
• Creating first procedural material as a design exploration
• Creating final first procedural material with vector math
• Few more tips for baking
• Checking face orientations/normals
• Glass material and modeling fish
• Introduction to baking
• UV Unwrapping for texture baking
• Render out an image to share!!!
• Start baking
• Analyze and adjusting bakes and exporting preparations
• Exporting and analysis
• Setup basic three.js starter with Vite.js
• Compressing model and textures
• Back to setup
• Setting up loaders and loading items
• Room material and appearance adjustments
• Glass material
• Water and bubble material
• Screen material
• Setting starting camera position and OrbitControls target
• Preparing for raycaster interactions and model/texture adjustments in Blender
• UV adjusting and texture painting to quickly patch baking errors
• Pushing to GitHub and deploying with Vercel
• Animating fans
• Raycaster click/touch interactions
• Basic modal with GSAP animations
• (Optional) Loading custom fonts and SCSS tips
• Raycaster hovering interaction with GSAP
• Customizing OrbitControls to limit pan and rotation
• Intro animations with GSAP
• Custom loading screen walkthrough
• A brief look at audio with Howler.js
• Setting a starting camera position for responsiveness
• Final push to GitHub!!!
• Final comments, future directions/challenges, shoutouts

Watch the full course on the freeCodeCamp.org YouTube channel (9-hour watch).

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers.Get started