Learn to create a room portfolio using Three.js and Blender. The course covers modeling, applying materials, optimization, animation, code structuring, asset importing, lighting, camera adjustments, responsive design, and deployment. The teaching method includes video tutorials with optional sections and updates on tools and technologies. This course is intended for individuals interested in 3D web development, portfolio creation, and interactive design.
Overview
Syllabus
Introduction
Prerequisites and Technologies
Watch Before Modeling
optional Modeling Section
Applying Materials
Deleting Faces/Meshes/Verts etc. for Optimization
optional Basic Fish Animation
Preparing Computer Screen UVs and Renaming
Exporting
optional What is a bundler?
Setting Up Our Bundler
Code Setup
optional What is a Singleton Design Pattern?
Structuring Code to use Singleton Pattern
Importing and Loading Our Assets
Adding Lighting
Adjusting Cameras
Quality of Life Adjustments
Adjusting GLB's Children and Lights
bonus Custom Camera Movements Along Curves
Lerping Rotations
Adjusting Camera and Quality of Life Adjustments
Adding a Floor
Adding Some HTML and CSS
Starting ScrollTrigger
Skip this Section - Black screen Bad Editing
Responsive ScrollTrigger
Theme Toggle
Adding More Sections and Responsive CSS
Adjusting Room Elements in Blender and JS
Responsive ScrollTrigger and Room/Camera Animation
Progress Bars and Border Radius Animation
Adding Smooth Scrolling
Adding Circle Floors and More Animation
Preloader and Intro Animations Promises, Async, Await
Final Responsive CSS Styles and Fixing Bugs
optional Pointing Out Bad Code
optional Viewing Vite's Production Build
Deploying EPIC Website with Git/Github/Vercel
MUST WATCH: MANDATORY STEP
Some Suggested Next Steps
Thank you!
Taught by
Andrew Woan
Reviews
5.0 rating, based on 1 Class Central review
-
Marcus MartillanoAndrew explains very concisely and everything needed to be learned. I managed to follow along well, especially for my first proper web dev project. I've learned some good practices in structures, and most importantly, how to think programmatically which is very useful especially when trying to troubleshoot, and figure out the roots of where codes can go wrong (because there always will be something wrong). Thank you so much for this tutorial.
