Three.js 7 天入门完整学习计划（有 JS/Vue 基础版，每天 1.5～3 小时）

配套资料：官方中文手册 + Discover three.js + B 站动力孪生 BV14r4y1G7h4 前置要求：会 JS、ES6、npm 基础；不会先花 1 天补 JS 基础再开始。

通用准备（第一天课前先做完）

1. 新建 vite 空项目，安装依赖

bash

运行

npm create vite@latest three-demo -- --template vanilla
cd three-demo
npm install three lil-gui
npm run dev

1. 收藏三个核心网站

• 官方中文手册：https://threejs.org/manual/zh/
• Discover three.js 中文：https://discoverthreejs.com/zh/
• 官方示例：https://threejs.org/examples/

Day1：核心三要素，搭建第一个 3D 场景（基础地基）

学习内容

1. 视频：动力孪生 1～6 集（场景、相机、渲染器）
2. 文档：Discover three.js 第一章「你的第一个场景」

必敲 Demo

1. 创建 Scene、PerspectiveCamera、WebGLRenderer
2. 渲染一个白色立方体，循环渲染动画 requestAnimationFrame
3. 画布自适应窗口大小（监听 resize）

当天掌握知识点

• 三维坐标系 x/y/z、透视相机原理、渲染循环
• 渲染器开启抗锯齿、设置背景色、尺寸适配

课后任务

自己写代码渲染球体、平面，调整相机远近观察区别

Day2：几何体、材质、灯光（画面看得见的核心）

学习内容

1. 视频：动力孪生 7～14 集
2. 文档：材质、灯光章节

必敲 Demo

1. 多种几何体：Box、Sphere、Cylinder、Torus 圆环
2. 三种基础材质：MeshBasicMaterial（无光照）、MeshLambertMaterial（漫反射）、MeshStandardMaterial（物理 PBR，工作最常用）
3. 添加环境光 AmbientLight + 平行光 DirectionalLight，开启阴影

当天掌握知识点

• PBR 金属 / 粗糙度参数、阴影开启全套流程
• 光源种类区别，什么时候用哪种灯

课后任务

做一个小场景：地面平面 + 几个不同材质几何体，灯光投射阴影

Day3：轨道控制器 + 调试工具 + 贴图纹理

学习内容

1. 视频：控制器、纹理贴图章节
2. 文档：OrbitControls、纹理 Texture

必敲 Demo

1. 引入 OrbitControls 实现鼠标拖拽旋转、滚轮缩放 3D 场景
2. lil-gui 可视化面板，实时修改物体颜色、灯光亮度、金属度
3. 给立方体加载图片纹理贴图（墙面、木纹）

当天掌握知识点

• 控制器阻尼、自动旋转开关
• 纹理加载器、贴图重复平铺

课后任务

带控制面板的可交互木纹立方体场景

Day4：模型加载 GLB/GLTF（业务最常用，重中之重）

学习内容

1. 视频：GLTF 加载器全套教程
2. 文档：模型加载章节，官方示例搜 GLTF

必敲 Demo

1. 引入 GLTFLoader 加载.glb 模型（推荐 sketchfab 下载免费小模型）
2. DRACO 模型解压，解决大模型卡顿
3. 修改模型整体材质颜色、缩放模型大小、调整位置

当天掌握知识点

• GLB 与 GLTF 区别、模型压缩、路径问题
• 模型加载完成回调、加载进度提示

课后任务

导入一个家具 / 小车模型，实现鼠标旋转查看

Day5：射线拾取、点击交互（数字孪生 / 展厅必备）

学习内容

1. 视频：射线 Raycaster 全套讲解
2. 文档：Raycaster 拾取案例

必敲 Demo

1. 鼠标点击物体，高亮变色
2. 鼠标悬浮显示文字弹窗
3. 点击模型弹出信息面板

当天掌握知识点

• 屏幕坐标转三维射线、拾取数组过滤
• 多层模型只拾取外层主体

课后任务

场景放多个模型，点击任意一个变色并弹出名称

Day6：动画 + 简单后期特效

学习内容

1. 视频：基础动画、雾效、后期

必敲 Demo

1. 物体自旋转、上下浮动动画（两种写法：矩阵更新 / AnimationMixer 模型自带动画）
2. 场景添加雾 Fog，营造空间氛围感
3. 简单辉光、描边后期效果（EffectComposer）

当天掌握知识点

• 原生简单动画 + 模型骨骼动画区分
• 后期渲染管线基础用法

课后任务

带浮动动画、雾效、点击高亮的完整小场景

Day7：综合实战项目：3D 商品展示页面（作品集可用）

整合前 6 天所有知识点，独立完成完整项目：

1. Vite 工程化搭建
2. 加载商品 GLB 模型
3. 轨道拖拽查看、滚轮缩放
4. GUI 面板切换商品配色、金属质感
5. 点击模型弹出产品介绍
6. 自适应窗口、加载进度条
7. 开启阴影 + 环境雾，美化画面

当日目标

不复制完整源码，靠自己回忆从零写完；出现报错学会去官方示例、文档查找解决方案。

7 天之后进阶路线（一周入门完再学）

1. 性能优化：实例化 InstancedMesh、LOD 分级模型、模型减面（Blender）
2. Vue3 + Three.js 工程封装（企业数字孪生标准架构）
3. 沙盘、楼层分层、数据点位、漫游功能
4. Shader 自定义材质、流体、地球可视化
5. Cannon.js 物理引擎做 3D 小游戏

避坑小贴士

1. 优先用 GLB 格式，少用 OBJ，加载更快；
2. 大模型一定要用 Blender 减面 + Draco 压缩，否则网页卡死；
3. 所有代码尽量使用最新 three.js 版本，老教程过时 API 不要照搬；
4. 遇到效果不会做，直接去官方 examples 搜关键词复制示例改造。