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
Network Analysis in RDataCamp Three.js & WebGL 3D Programming Crash Course (VR, OpenGL)
Udemy 3D Programming with JavaScript and the Three.js 3D Library
Udemy Three.js Tutorial for Beginners
YouTube Aprende Three.js , 3D en el navegador
Udemy