Three.js从小白到实战，学不会的同学有救了！

一、案例结构

第 1 章，介绍

介绍了在创建新方法时可以使用的基本方法。基于three.js 的应用程序。我们将向您展示如何设置一个基本的 Three.js 骨架使用任何可用的 Three.js 渲染器。我们将进一步向您展示 WebGL 检测、加载资源，设置动画循环，添加拖放支持，并控制键盘的场景。

欢迎加V-X获得源码：liweb2022

WebGL 渲染器入门

开始使用画布渲染器

CSS 3D 渲染器入门

检测 WebGL 支持

设置动画循环

确定场景的帧速率

控制场景中使用的变量

使用 Python 设置本地 Web 服务器

使用 Node.js 设置本地 Web 服务器

使用 Mongoose 设置本地 Web 服务器

解决 Chrome 中的跨域域错误消息

解决 Firefox 中的跨域错误消息

添加键盘控件

异步加载纹理

异步加载模型

与进度异步加载模型

与进度异步加载其他资源

等到资源加载完毕

将文件从桌面拖到场景中

第 2 章，几何和网格

向您展示了一些专注于创建的食谱，使用和操作几何图形和网格。我们将详细介绍如何以不同方式旋转网格，使用矩阵变换操作它们，生成以编程方式生成几何图形，并从 Blender 和其他格式加载模型。

围绕自己的轴旋转对象

围绕空间中的一个点旋转对象

通知 Three.js 更新

处理大量对象

从高度图创建几何图形

将一个对象指向另一个对象

以 3D 形式书写文本

将 3D 公式渲染为 3D 几何图形

使用自定义几何对象扩展 Three.js

在两点之间创建样条曲线

从 Blender 创建和导出模型

使用带有多种材质的 OBJMTLLoader

应用矩阵变换

第 3 章,使用 相机

重点 介绍 操作 相机 的 方法 .在 Three.js 中可用。它向您展示了如何使用透视和正交相机。本章还向您展示了解释如何旋转相机、居中相机，并跟随周围的物体。

使相机跟随物体

将相机缩放到对象

使用透视相机

使用正交相机

创建 2D 叠加

围绕场景旋转相机

将渲染视图与调整大小的浏览器匹配

将世界坐标转换为屏幕坐标

选择场景中的对象

第 4 章，材料和纹理

包含说明如何获得良好结果的方法使用 Three.js 提供的材料。它有关于透明度、反射、UV贴图、面部材质、凹凸贴图和法线贴图，还解释了各种混合模式工作。

使用凹凸贴图为网格添加深度

使用法线贴图为网格添加深度

使用 HTML 画布作为纹理

使用 HTML 视频作为纹理

创建具有多种材质的网格

对面使用单独的材质

设置重复纹理

使对象的一部分透明

使用立方体贴图创建反射材质

使用动态立方体贴图创建反射材质

使用 Blender 创建自定义 UV 映射

配置混合模式

为固定阴影使用阴影贴图

第 5 章，灯光和自定义着色器

提供了处理Three.js 中的不同光源并向您展示如何使用 WebGL 着色器。表明您如何正确设置阴影，创建类似太阳的光源，并进入聚光灯、点光源和定向光源之间的区别。在本章中，我们还将为您提供了一些说明如何创建自定义顶点着色器和自定义片段着色器。

使用 THREE.SpotLight 创建阴影

使用 THREE.DirectionalLight 创建阴影

通过添加环境照明来柔化灯光

使用 THREE.HemisphereLight 进行自然采光

添加移动的全方位灯光

沿路径移动光源

使光源跟随物体

创建自定义顶点着色器

创建自定义片段着色器

第 6 章，点云和后处理

为您提供了一些秘诀，向您展示如何设置后处理。通过后处理，您可以通过模糊增强场景，着色或其他类型的效果。本章还包含解释功能的秘诀粒子系统，例如动画和粒子材质。

基于几何创建点云

从头开始创建点云

为点云中的单个点着色

样式化单个点

移动点云的各个点

爆炸点云

设置基本的后处理管道

创建自定义后处理步骤

将 WebGL 输出保存到磁盘

第 7 章,动画 和 物理
 向 你 展示 一些 帮助 你 制作 动画 的 食谱 .场景中的对象并向您展示如何添加物理（例如重力和碰撞）检测）到您的场景。

使用 Tween.js 创建动画

使用变形目标的动画

骨骼动画

使用在 Blender 中创建的变形动画

使用在 Blender 中创建的骨架动画

添加简单的碰撞检测

在 Chrome 中保存动画电影

在场景周围拖放对象

添加物理引擎

二、源码案例截图

电子书+代码

截图：

案例截图

哪些人需要这个案例集：

1、从事Web前端开发想转三维开发的技术同学；

2、想对自己的技术壁垒再提升一个级别的同学；

3、未来想事数字孪生的同学；

4、想对三维技术进行研究不知道从哪里开始的入门。

需要什么条件：

1、前端开发基础熟悉html+css+js，能写基本的网页页面；

2、html+css+js零基础不建议学，如果学的话先学html+css+js。