Three.js Advanced：Commercial Car Showcase Project Journey

Not only Three.js, but also Technical Art.

Created byDa Pang

Last updated 2/2025

English

What you'll learn

Basic Construction: Set up the project framework of Three.js, create a 3D environment in Blender, and load the scene in the program.
Global Light and Shadow: Achieve real-time dynamic lighting and reflection, soft pseudo-shadows, and ambient fog.
Vehicle Body Dynamic Effects: Plan the functions of the vehicle body, implement dynamic effects such as curves, air resistance, dimension display, radar, etc.,
Global Optimization: Optimize the performance of both the model and the program.

Course content

1 section • 55 lectures • 12h 14m total length

00 - Course Completion Screen Recording0:33
01 - Course Introduction7:00
02 - Create a Project Engineering3:32
03 - Build the Basic Environment and Load the Car Model24:29
04 - Three Methods to Achieve Real-time Dynamic Reflection14:56
05 - Achieve Scene Dynamic Reflection19:49
06 - Increase the Texture of the Ground14:49
07 - Soft Shadows of the Car13:51
08 - Model of the Flying Ion Channel10:27
09 - Production of the Flying Particle Texture Map14:43
10 - Fusion of the Flying Particle Scen16:52
11 - Achieve the Flying Effect and Enhance the Reflection12:44
12 - Dynamic Effect of the Wheels8:06
13 - Dynamic Effect of Perspective Zooming When the Mouse is Pressed12:04
14 - Match the Dynamic Effect with the Mouse Interaction17:19
15 - Acceleration and Deceleration of the Wheels and the Ground13:53
16 - Jitter of the Camera during High-speed Movement14:51
17 - Fusion Processing of the Distant Tunnel and Control Optimization9:16
18 - Two Implementation Methods of the Area Light Source6:08
19 - The Principle of Bloom and the Realization of the Actual Visual Effect10:29
20 - Preparation of the Functions of the Car Body Module3:36
21 - Deduction of the Realization Ideas of the Car Body Curve14:18
22 - Detailed Production of the Car Body Curve I18:31
23 - Detailed Production of the Car Body Curve II15:56
24 - Realize the Dynamic Effect of the Car Body Curve20:57
25 - Detail Adjustment of the Car Body Curve7:29
26 - Dimension Marking of the Car Body19:45
27 - Switch of the Functional Modules15:30
28 - Camera Easing Interaction3:30
29 - Basic Model of the Air Resistance9:47
30 - Production and Optimization of the Air Resistance Texture Map16:23
31 - Dynamic Effect and Interaction of the Air Resistance13:00
32 - Analysis of the Advantages and Disadvantages and Verification of the Two Pr10:43
33 - Production of the Car Body Sideline I11:43
34 - Production of the Car Body Sideline II13:26
35 - Production of the Car Body Sideline Texture Map13:03
36 - Dynamic Effect of the Car Body Sideline12:51
37 - Improvement of the Dynamic Effect of the Car Body Sideline13:57
38 - Principle and Production of the Car Body Trimming23:32
39 - Interaction of the Car Body Trimming14:24
40 - Realization of the Car Body Trimming I19:01
41 - Realization of the Car Body Trimming II23:08
42 - Detail Adjustment of the Car Body Trimming Function8:26
43 - Realization Logic of the Radar and the Preliminary Knowledge18:44
44 - Realization of the Radar on the Car Body Edge19:40
45 - Dynamic Effect of the Single-circle Radar11:28
46 - Dynamic Effect of the Multi-circle Radar15:13
47 - Production of the Endless Road Texture Map17:39
48 - Dynamic Effect of the Endless Road12:36
49 - Dynamic Effect of the Wheels5:58
50 - Simple Model of the Surrounding Accessory Vehicles7:02
51 - Dynamic Effect of the Accessory Vehicles12:36
52 - Dynamic Effect of Color Change When the Radar Touches18:24
53 - Dynamic Effect of Zooming When the Radar Touches11:51
54 - Performance and GLB Volume Optimization14:06

Requirements

Basic Knowledge of JavaScript & Three.js

Description

This course focuses on the advanced application of Three.js in the field of commercial automobile display.

Through systematic learning, you will embark on a journey of constructing advanced visual effects for commercial automobile displays from scratch, endowing the automobiles with vivid vitality.

The entire course progresses step by step, helping you become a professional Three.js technical artist.

The course begins with the construction of basic projects, demonstrating every detail meticulously.

Firstly, in terms of visual effects, it focuses on achieving dynamic reflection of the car's surface and the scene. This involves exploring various real-time reflection methods and creating a rich texture of light and shadow. For example, enhancing the texture of the ground and shaping soft shadows for the car, which can improve the picture quality from multiple aspects.

Secondly, regarding dynamic effect design, a series of carefully designed and implemented effects are included. Such as the dynamic simulation of the car, the simulation of acceleration and deceleration, as well as the effects of particle shuttling, the presentation of the air resistance effect, the decoration of the car body sidelines, and the interaction with the radar.

In conclusion, this course provides a comprehensive learning experience to help you master the skills needed for outstanding commercial automobile display projects using Three.js.

Who this course is for:

Web Front-End Development Engineer