认识three.js和本地环境搭建

要学习three.js首先我们要了解几个概念

什么是3d，什么是webgl，那么three.js又是什么。

下面我们来一一介绍。

首先什么是3d?

3D，全称为Three-Dimensional，即三维，是指在空间中具有三个维度（长度、宽度和高度）的概念。在现实世界中，我们所处的就是一个三维空间，物体都有立体形态，可以从不同的角度观察到其不同侧面。

在数字技术和娱乐领域中：

1. **3D图形技术**：指的是计算机生成的三维图像和动画，它模拟了真实世界的三维特性，使得用户可以通过屏幕感知到深度和立体感。这种技术广泛应用于电影制作（如3D电影）、游戏开发、建筑可视化、工业设计、科学计算可视化等多个方面。

2. **3D显示技术**：包括立体视觉技术（如红蓝眼镜、偏振眼镜或快门式眼镜观看的立体影像）、裸眼3D显示技术等，它们通过特定方式让观众看到有立体深度的图像内容。

3. **3D扫描与打印技术**：可以捕捉现实世界中的物体并转化为数字化三维模型，同时也可以将这些模型通过3D打印机输出为实物，实现从虚拟到物理世界的转化。

4. **3D测量技术**：用于获取物体在三维空间内的精确坐标数据，常用于工业检测、地理信息系统、考古等领域。

5. **WebGL**：正如上一个问题所述，WebGL是一种允许在浏览器环境中创建和展示交互式3D内容的技术标准。

综上所述，3D涵盖了多个方面的技术和应用，核心是通过各种方法在二维媒介上展现或创造三维空间效果及实体。

那么什么是webgl?

WebGL（全称Web Graphics Library）是一种JavaScript API（应用程序接口），它允许浏览器在无需任何插件的情况下直接利用计算机的图形处理器（GPU）在HTML5 Canvas元素上渲染交互式2D和3D图形内容。WebGL基于OpenGL ES 2.0标准，通过提供一套JavaScript绑定来实现硬件加速的3D图形处理，使得开发者能够在web页面中创建复杂的3D模型、动画以及数据可视化效果。

使用WebGL，网页开发人员可以编写出高性能、实时渲染的3D应用程序，如游戏、模拟系统、产品演示、GIS应用等。由于它是内置于现代浏览器中的标准技术，用户无需安装额外软件即可访问这些丰富的图形体验。

three.js又是什么？

three.js 是一个基于 WebGL 的 JavaScript 库，用于在浏览器中创建和展示交互式三维（3D）图形内容。通过 three.js，开发者无需深入理解底层 WebGL API 和复杂的图形编程细节，就能相对轻松地使用 JavaScript 构建出丰富的 3D 场景和应用，如游戏、数据可视化、产品演示、虚拟现实体验等。

该库提供了一系列高级API和对象，包括：

- 3D几何体（几何形状）的创建和加载
- 材质和纹理的应用
- 照明系统的配置
- 相机视图控制
- 渲染器设置以适应不同设备和性能需求
- 动画系统和场景更新循环
- 加载和解析多种3D模型格式（如OBJ, FBX, GLTF等）
- 用户交互功能，如鼠标/触摸事件处理

由于其易用性和强大的功能集，three.js 成为了 Web 开发者社区中最流行和广泛使用的 3D 图形库之一。

由此我们可以得出结论，他们三者之间的关系？

3D、WebGL 和 three.js 之间的关系可以这样概述：

1. **3D**:
   - 3D（三维）是指在计算机图形学中模拟真实世界的三维空间，包括物体的形状、位置、旋转和透视等效果。它涵盖了广泛的领域，从游戏开发到建筑可视化、动画制作、科学计算可视化等等。

2. **WebGL**:
   - WebGL 是一种浏览器 API（基于 OpenGL ES 2.0），允许开发者在任何兼容的 Web 浏览器中创建交互式的 3D 图形和 2D 绘图，而无需使用插件。
   - WebGL 提供了对底层图形硬件（GPU）的直接访问，通过 JavaScript 来编写程序来渲染复杂的 3D 场景。

3. **three.js**:
   - three.js 是一个基于 WebGL 的高性能、易用的 JavaScript 库，用于在 Web 浏览器中创建和展示 3D 内容。
   - three.js 对 WebGL 的原生 API 进行了封装和抽象，提供了一套简洁且功能丰富的接口，使得开发者能够更快速地构建和管理 3D 场景、几何体、材质、光照、摄像机以及动画等内容，而无需深入掌握 WebGL 的复杂细节。

总结起来：
- 3D 是指三维图形技术的概念。
- WebGL 是实现网页端 3D 渲染的核心技术标准。
- three.js 则是建立在 WebGL 基础之上的一层高级库，为开发者提供了便捷高效的工具集以简化网页 3D 开发过程。

那么我们在缕清上述三者的关系之后，就明白了，我们可以通过学习three.js可以轻松的绕过学习webgl中的很多底层的知识，不至于一上来就让我们对webgl这个知识的学习难度而放弃他。

three.js

https://threejs.org/（官网地址）

我们在打开这个网站的时候可能会因为网速问题导致页面加载缓慢。

那么我们有什么方法能快速的打开这个呢，一种土豪的方式，利用梯子或者升级你的网速。那么另外一种方式是什么呢？

就是本地搭建一套这个网站的代码。

下面是three.js的github地址：https://github.com/mrdoob/three.js/

我们可以本地下载代码之后启动，然后本地去浏览这个网站上的东西，不就很快了吗

下载代码之后，运行命令npm run start

然后我们点docs/这个，就可以看到下面页面了

这样我们就可以愉快的去探索three.js了。