Create a Room Portfolio with Three.js and Blender - Awwwards' Sites Recreated
Offered By: YouTube
Course Description
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
Basic 3D Modeling using BlenderIndian Institute of Technology Bombay via edX Basic 3D Animation using Blender
Indian Institute of Technology Bombay via edX Imprimiendo en 3D
Universidad Politécnica de Madrid via Miríadax Imprimiendo en 3D
Universidad Politécnica de Madrid via Miríadax การออกแบบสื่อสามมิติด้วยโปรแกรม Blender 3D | 3D Media design with Blender 3D
Chiang Rai Rajabhat University via ThaiMOOC