Главная
Study mode:
on
1
Introduction
2
Prerequisites and Technologies
3
Watch Before Modeling
4
optional Modeling Section
5
Applying Materials
6
Deleting Faces/Meshes/Verts etc. for Optimization
7
optional Basic Fish Animation
8
Preparing Computer Screen UVs and Renaming
9
Exporting
10
optional What is a bundler?
11
Setting Up Our Bundler
12
Code Setup
13
optional What is a Singleton Design Pattern?
14
Structuring Code to use Singleton Pattern
15
Importing and Loading Our Assets
16
Adding Lighting
17
Adjusting Cameras
18
Quality of Life Adjustments
19
Adjusting GLB's Children and Lights
20
bonus Custom Camera Movements Along Curves
21
Lerping Rotations
22
Adjusting Camera and Quality of Life Adjustments
23
Adding a Floor
24
Adding Some HTML and CSS
25
Starting ScrollTrigger
26
Skip this Section - Black screen Bad Editing
27
Responsive ScrollTrigger
28
Theme Toggle
29
Adding More Sections and Responsive CSS
30
Adjusting Room Elements in Blender and JS
31
Responsive ScrollTrigger and Room/Camera Animation
32
Progress Bars and Border Radius Animation
33
Adding Smooth Scrolling
34
Adding Circle Floors and More Animation
35
Preloader and Intro Animations Promises, Async, Await
36
Final Responsive CSS Styles and Fixing Bugs
37
optional Pointing Out Bad Code
38
optional Viewing Vite's Production Build
39
Deploying EPIC Website with Git/Github/Vercel
40
MUST WATCH: MANDATORY STEP
41
Some Suggested Next Steps
42
Thank you!
Description:
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.

Create a Room Portfolio with Three.js and Blender - Awwwards' Sites Recreated

Add to list