Three.js From Basic to Advanced: Combining Technology & Art

Name: Three.js From Basic to Advanced: Combining Technology & Art
Rating: 4.5 (1 reviews)

Integrate the knowledge of Three.js with 3D art to cultivate the ability of independent development.

Created byDa Pang

Last updated 5/2026

English

What you'll learn

Stage 1: Building Art Resources. By getting familiar with software such as Blender and Photoshop, and constructing 3D scene model resources for the auto show mo
Stage 2: Three.js Driving the 3D Venue. Combining the already familiar 3D art knowledge, you will learn the core knowledge of Three.js and apply it flexibly to
Stage 3: Adding Dynamic Effects to the Scene. Through the programs of Three.js and 3D art methods, dynamic effects will be added to the scene to make it more vi
Stage 4: Character Model, Third-Person Camera, Skeletal Animation, Scene Collision. By obtaining or creating character models, you will learn the processes of c
Stage 5: Interaction Function. Add a 3D model of a car and the interaction function of the car. Consolidate the modeling knowledge during the vehicle modeling p
Stage 6: Mini Game. In this stage, comprehensively apply the knowledge of modeling, materials, Three.js, tween animation, etc. to implement the designed interac
Stage 7: Improving Image Quality. Explain how to improve the visual effect through 3D art methods and programming methods, as well as their advantages and disad
Stage 8: Performance Optimization and Artistic Misunderstandings. Explain the principles and practical methods of performance optimization, which can be used as
Stage 9: Thinking Expansion. Practice using simple 3D art knowledge and mathematical knowledge to achieve advanced dynamic effects, broaden the creative thinkin

Course content

9 sections • 62 lectures • 27h 0m total length

01 Course Introduction3:32
02 Appreciation of Blender11:38
Explore blender as an open source all-in-one tool for modeling, rendering with cycles, materials, animation, particles, and editing, and see its use in film, game, and metaverse projects.
03 Basic Operations of Blender12:21
04 Building the Auto Show Exhibition Hall Part 144:11
05 Building the Auto Show Exhibition Hall Part 223:56
06 Building the Auto Show Exhibition Hall Part 329:56
07 Setting the Material of the Exhibition Hall28:09

08 Building the Development Environment of Three.js4:13
09 Three.js Quick Start Part 116:23
10 Three.js Quick Start Part 216:46
11 Geometry and Its Application Scenarios14:53
12 Steps for Setting up Lighting and Shadows, Causes of Troubleshooting Issues a35:47
13 PBR Material17:28
14 Theory of Transparent Textures19:32
15 Practice of Transparent Textures14:12
16 Creating a Car: Comprehensive Modeling Practice Part 11:00:39
17 Creating a Car: Comprehensive Modeling Practice Part 223:21

18 The Three.js Group and the Blender Group15:16
19 Adding Dynamic Effects Part 1: Moving, Rotating, Scaling, Parent-Child Object34:46
20 Adding Dynamic Effects Part 2: Tween34:55
21 Adding Dynamic Effects Part 3: Keyframe Animation28:37
22 Adding Dynamic Effects Part 4: Points18:13
23 Ray Picking Part 128:29
24 Ray Picking Part 220:16
25 Ray Picking Part 318:07
26 Ray Picking Part 421:58
Explore ray picking in three.js to select and recolor objects like golden eggs, addressing shared materials and uv mapping, and learn code-side material cloning for independent changes.

27 Enhancing the Visual Effect: HDR Lighting14:31
28 Character: Creating the Model47:29
29 Character: Skeleton Binding31:17
30 Character: Keyframing the Action22:20
Master skeletal rigging and skinning to enable bone-driven movement and vertex deformation. Create idle and walking animations on a shared timeline for three.js, using pose mode and keyframes.
31 Character: Automatic Binding in Mixamo and Merging Actions in Blender26:05
Explore automatic binding in Mixamo to rig a character, export as FBX, then import into Blender for idle and walking animations and action cleanup.
32 Character Animation Cropping and Character Controlling the Camera27:10
33 Character Action Switching17:32
34 Third-Person Camera Control Part 159:15
35 Third-Person Camera Control Part 219:26
36 Scene Collision: Ray Detection36:35
37 Adding Exhibit Cars20:30

38 Car Interaction: Door Opening Animation38:52
39 Car Interaction: Camera Flying-In Animation38:19
40 Car Interaction: 360 Panorama Display24:22
41 Car Interaction: Hotspot Icons42:28
42 Car Interaction: Changing the Car Body Color34:06
explore adding an interactive six-color UI to change a car body's color in three.js, with rgb-based tweened transitions and a color palette hotspot controlling the material color.
43 Skeleton Cloning: Stage Dance22:43
44 Character Name: CSS2D&3DRenderer12:35
45 Fixing Display and Interaction Issues17:55

47 Comprehensive Interactive Game Practice: Tree Dynamic Effects36:19
46 Comprehensive Interactive Game Practice: Tree Modeling and Optimization34:31
48 Comprehensive Interactive Game Practice: Generation and Picking of Energy Bal32:08
49 Comprehensive Interactive Game Practice: Character Control and the Speed Up/S31:57
50 Comprehensive Interactive Game Practice: Shuttling Particles35:05
51 Comprehensive Interactive Game Practice: Dynamic UV Effect of the Road Surfac23:42
52 Comprehensive Interactive Game Practice: Creating Text Models Dynamically and24:57
53 Comprehensive Interactive Game Practice: Resource Cleanup When Exiting the Ga38:56
54 Comprehensive Interactive Game Practice: 2D UI of the Game35:07

Requirements

Basic Knowledge of JavaScript

Description

This course is designed to help students master the core knowledge of Three.js, 3D modeling skills, the ability to quickly bind character models and set up skeletal animations, etc., enabling them to independently create their own Three.js interactive applications. The course not only cultivates students' programming thinking but also helps them understand art production, allowing students to easily take control of Web3D project development. Different from most Web3D courses on the market, this course doesn't just teach you how to use Three.js. It also enables you to learn the production of art resources such as 3D models. Taking the construction of real Web3D commercial projects as the main thread running through the course, it starts from two aspects: art resource production and the application of Three.js. It will guide you to grow efficiently into the Web3D talent that companies need. Instead of simply stacking knowledge, the course follows the actual project development process, leading students step by step to restore and complete the entire process of commercial project development. It helps students become independent Web3D developers, while equipping them with the ability to create 3D art resources and the flexibility to apply Three.js, so that they can independently create their own works.

Who this course is for:

Web Front-End Development Engineer
3D Artist

Three.js From Basic to Advanced: Combining Technology & Art

What you'll learn

Explore related topics

Course content

Building of 3D Resources7 lectures • 2hr 34min

Introduction to Three.js and Practical Applications10 lectures • 3hr 43min

Dynamic Effects of the Scene9 lectures • 3hr 41min

Character Model, Third-Person Camera, Skeletal Animation, Scene Collision11 lectures • 5hr 22min

Interaction Function8 lectures • 3hr 51min

Comprehensive Practice of Interactive Games9 lectures • 4hr 53min

Improve Image Quality3 lectures • 1hr 32min

Performance Optimization and Artistic Misconceptions2 lectures • 41min

Expansion of Thinking3 lectures • 44min

Requirements

Description

Who this course is for: