Content
21 Lessons • 0 Quizzes • 0 Challenges
课程简介
- 1
课程概述
第一部分：快速上手
- 1
Three.js 基础入门
使用 Three.js 创建第一个 3D 场景
- 1
使用 Three.js 实现 3D 网页图形
- 2
测试和实验示例
- 3
渲染与查看三维物体
- 4
添加灯光和网格
- 5
添加动画循环
- 6
启用轨道控制
- 7
辅助对象和工具函数
- 8
使用 Three.js 创建第一个 3D 场景的总结
- 9
测验自己：使用 Three.js 创建第一个 3D 场景
构成 Three.js 应用的基本组件
- 1
Three.js 应用的基本组件
- 2
创建一个具备基本功能的场景
- 3
添加和移除对象与雾效
- 4
更改背景
- 5
更新场景中所有对象的材质
- 6
几何形状与网格
- 7
网格的函数和属性
- 8
使用不同的相机拍摄不同场景
- 9
调试相机视角
- 10
Three.js 应用的基本组成部分总结
- 11
自测练习：构成 Three.js 应用的基本组件
在 Three.js 中使用光源
- 1
开始使用光源
- 2
灯光类型
- 3
使用基本灯光：环境光
- 4
使用基本灯光：聚光灯
- 5
使用基本灯光：点光源
- 6
使用基本灯光：方向光
- 7
在 Three.js 中创建颜色对象
- 8
使用特殊光源
- 9
THREE.LightProbe 和 THREE.LensFlare
- 10
Three.js 中光源的使用总结
- 11
自测练习：在 Three.js 中使用光源
第二部分：使用 Three.js 核心组件
- 1
掌握 Three.js 材质、几何体和效果
使用 Three.js 材质
- 1
Three.js 中的材质
- 2
Three.js 中材质的属性
- 3
从简单的材料开始
- 4
简单材质：MeshDepthMaterial
- 5
简单材质：MeshNormalMaterial
- 6
一个网格使用多种材质
- 7
高级材料
- 8
高级材质：标准、物理和阴影
- 9
使用自定义着色器与 ShaderMaterial
- 10
线材质：LineBasicMaterial 与 LineDashedMaterial
- 11
Three.js 材质概述
- 12
测验自己：使用 Three.js 材质
学习如何处理几何图形
- 1
几何图形操作入门
- 2
2D几何：平面几何（PlaneGeometry）
- 3
2D几何体：CircleGeometry 和 RingGeometry
- 4
2D几何图形：ShapeGeometry
- 5
3D几何体：BoxGeometry 和 SphereGeometry
- 6
3D几何体：圆柱体几何体和圆锥体几何体
- 7
3D几何体：环面几何体和环面纽结几何体
- 8
3D几何：多面体形状
- 9
学习处理几何图形的总结
- 10
测验自己：学习如何处理几何图形
探索高级几何
- 1
探索高级几何入门
- 2
高级几何：凸几何与车削几何
- 3
高级几何体：BoxLineGeometry 和 RoundedBoxGeometry
- 4
高级几何体：茶壶几何体
- 5
通过拉伸二维形状创建几何体
- 6
从 SVG 元素生成三维形状
- 7
我们可以用于调试的几何形状
- 8
创建一个3D文本网格
- 9
探索高级几何学概要
- 10
测验自己：探索高级几何
点和精灵
- 1
点与精灵简介
- 2
理解点和精灵
- 3
使用纹理来美化粒子
- 4
用粒子纹理模拟雨滴
- 5
使用精灵图
- 6
从现有几何体创建 THREE.Points
- 7
要点与精灵总结
- 8
自我测验：点与精灵
第三部分：粒子云、加载与模型动画
- 1
深入理解 Three.js：网格、动画与纹理详解
创建和加载高级网格与几何体
- 1
高级网格与几何体简介
- 2
分组几何图形
- 3
来自外部资源的几何图形
- 4
使用本地存储保存和加载场景
- 5
从3D文件格式导入
- 6
加载 glTF 模型
- 7
加载乐高和体素模型
- 8
加载 PDB 模型
- 9
加载 PLY 模型
- 10
高级网格与几何体的创建与加载概述
- 11
自测练习：高级网格与几何体
动画与摄像机移动
- 1
动画简介与相机移动
- 2
Three.js 中的动画
- 3
使用鼠标选择对象
- 4
使用鼠标移动物体
- 5
使用 Tween.js 实现动画
- 6
Three.js 中的相机控制：弧球控制（ArcballControls）
- 7
Three.js 中的相机控制：TrackballControls
- 8
Three.js 中的相机控制：FlyControls 相机
- 9
Three.js 中的相机控制：第一人称控制
- 10
Three.js 中的相机控制：OrbitControls
- 11
变形与骨骼动画
- 12
使用形态目标的动画
- 13
带骨骼的动画
- 14
使用外部模型的动画：glTF 和 FBX 模型
- 15
Quake、COLLADA 与 BVH 模型动画
- 16
动画与摄像机移动总结
- 17
自测题：动画与相机移动
加载和使用纹理
- 1
纹理处理入门
- 2
材质中的纹理
- 3
高动态范围图像作为纹理
- 4
法线贴图实现凹凸与褶皱效果
- 5
置换贴图改变顶点位置
- 6
环境光遮蔽图
- 7
使用光照贴图创建虚假灯光
- 8
金属度和粗糙度贴图
- 9
Alpha Map
- 10
发射贴图
- 11
高光贴图
- 12
环境贴图
- 13
重复包裹
- 14
将内容渲染到画布并将其用作纹理
- 15
纹理的加载与使用概述
- 16
测验自己：加载和使用纹理
第四部分：后期处理、物理效果与音效
- 1
掌握 Three.js 中的后期处理、物理效果和声音
渲染后处理
- 1
渲染后期处理简介
- 2
设置 Three.js 用于后期处理
- 3
后处理阶段
- 4
在同一屏幕上渲染多个输出
- 5
高级 EffectComposer
- 6
高级通道：Bokeh 通道和 SSAO 通道
- 7
使用 THREE.ShaderPass 的自定义效果
- 8
自定义后处理着色器
- 9
渲染后期处理总结
- 10
测验自己：渲染后期处理
为场景添加物理效果和音效
- 1
Three.js 中的物理与声音入门
- 2
Three.js 和 Rapier
- 3
在 Rapier 中模拟多米诺骨牌
- 4
恢复系数与摩擦力
- 5
Rapier 内置形状
- 6
物体的关节
- 7
球面关节、旋转关节和移动关节
- 8
Three.js 场景中的声音
- 9
场景中添加物理效果和声音的总结
- 10
自我测验：为我们的场景添加物理效果和音效
使用 Blender 和 Three.js
- 1
Blender与Three.js入门指南
- 2
将 Three.js 场景导入 Blender
- 3
在 Three.js 中导入简单的 Blender 模型
- 4
从 Blender 导入动画到 Three.js
- 5
从 Blender 烘焙光照贴图和环境光遮蔽
- 6
在 Blender 中自定义 UV 建模
- 7
使用Blender和Three.js的总结
- 8
自我测验：使用 Blender 和 Three.js
Three.js：与 React、TypeScript 和 WebXR 一起使用
- 1
使用 React、TypeScript 和 WebXR 的 Three.js 入门
- 2
使用 Three.js 与 TypeScript
- 3
使用 Three.js 和 React 与 TypeScript
- 4
使用 Three.js 和 React 以及 React Three Fiber
- 5
使用 Drei 包与 React Fiber
- 6
将 Three.js 与 VR 集成
- 7
将 Three.js 与 AR 集成
- 8
Three.js 与 React、TypeScript 和 WebXR 的结合使用总结
- 9
自我测验：使用 React、TypeScript 和 WebXR 的 Three.js
结论
- 1
总结
附录
- 1
技术要求
- 2
课程中使用的代码结构
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Course Author:Anonymous User