Three.js 中高阶：汽车交互视觉动效商业项目

Three.js & 技术美术

Created byDa Pang

Last updated 3/2025

Chinese (Simplified)

What you'll learn

基础构建：搭建 Three.js 项目框架，在 Blender 中创建三维环境，并在程序中加载该场景。
全局光影效果：实现实时动态光照与反射、柔和的伪阴影以及环境雾效果。
车身动态效果：规划车身的各项功能，实现诸如曲线行驶、空气阻力模拟、尺寸显示、雷达等动态效果。
全局优化：对模型和程序的性能都进行优化。

Course content

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

01-结课录屏0:33
02-课程介绍7:17
03-创建项目工程3:32
04-搭建基础环境加载汽车模型24:29
05-实现实时动态反射的三种方法14:56
06-实现场景动态反射19:48
07-增加地面质感14:49
08-汽车柔和阴影13:51
09-飞行离子通道模型10:27
10-飞行粒子贴图制作14:43
11-飞行粒子场景融合16:51
12-飞行效果实现及反射增强12:44
13-车轮动效8:06
14-鼠标按下视角缩放动效12:03
15-动效与鼠标交互匹配17:18
16-车轮及地面加速减速13:52
17-高速运动相机抖动14:51
18-隧道远处融合处理及控制优化9:16
19-面光源的两种实现方式6:20
20-bloom原理及实际视觉效果实现10:29
21-车身模块功能准备3:36
22-车身曲线实现思路推导14:18
23-车身曲线制详细制作一18:30
24-车身曲线制详细制作二15:55
25-车身曲线制动效实现20:57
26-车身曲线细节调整7:29
27-车身尺寸标注19:45
28-功能模块切换15:30
29-相机缓动交互3:30
30-风阻基础模型9:47
31-风阻贴图制作及优化16:22
32-风阻动效及交互13:00
33-车身边线的两种制作方式优劣分析及验证10:43
34-车身边线制作一11:43
35-车身边线制作二13:26
36-车身边线贴图制作13:03
37-车身边线动效12:51
38-车身边线动效完善13:56
39-车身裁减原理及制作23:31
40-车身裁减交互14:24
41-车体裁减实现一19:01
42-车体裁减实现二23:08
43-车身裁减功能细节调整8:26
44-雷达的实现逻辑及铺垫知识18:43
45-车身边缘雷达实现19:40
46-单圈雷达动效11:28
47-多圈雷达动效15:12
48-无尽路面贴图制作17:38
49-无尽路面动效12:36
50-车轮动效5:58
51-周边配饰车辆简模7:02
52-配饰车辆动效12:36
53-雷达触及变色动效18:24
54-雷达触及缩放动效11:51
55-性能及glb体积优化14:06

Requirements

JavaScript 与 Three.js 的基础知识

Description

本课程旨在帮助学员掌握Three.js核心知识、3D建模能力、角色模型快速绑定及设定骨骼动画等能力，达到独立自主创建自己的Three.js互动应用。课程既培养学员程序思维也帮助学员认知美术制作，使学员可以轻松把控Web3D项目开发。

区别于市面上的大部分Web3D课程，不只为教您Three.js的相关使用，也能让您学会3D模型等美术资源制作。以真实的Web3D商业项目搭建为贯穿主线，从美术资源制作和Three.js使用两个方面入手。带您高效成长为公司需要的Web3D人才。不做简单的知识堆叠，课程按照项目真实开发流程，一步步带领学员还原完成商业项目开发的全过程，助力学员成为Web3D独立开发者。

Who this course is for:

Web前端开发工程师