Learn to create an impressive 3D room portfolio using Three.js and Blender in this comprehensive tutorial. Master the process of modeling, texturing, and animating a 3D environment, then integrate it into a responsive web application. Explore advanced techniques such as custom camera movements, scroll-triggered animations, and theme toggling. Dive into code structuring with the Singleton design pattern, asset management, lighting setup, and performance optimization. Implement smooth scrolling, preloaders, and responsive designs. Finally, deploy your creation using Git, GitHub, and Vercel. Perfect for developers looking to elevate their web design skills with immersive 3D experiences.
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
Related Courses
Related articles
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.
