我们可以在网页中轻易地展示图片或其他平面形状。然而，当要展示 3D 模型时，事情就不那么简单了，因为三维空间比二维空间更复杂。为了实现 3D 效果，我们可以使用专门的技术和库，如 WebGL 和 Three.js。
然而，如果你只是想展示一些基本形状时，如立方体，那么这些技术就显得大材小用了。另外，使用它们并不会帮助你理解其工作原理，或解答如何在平面中显示 3D 形状的疑问。
我编写这篇教程的目的是：阐述如何在 web 中构建一个简单的 3D 引擎（无 WebGL）。我们将首先学习如何存储 3D 模型，然后学习如何在两种不同视图（正视图和透视图）中展示这些形状。
保存和转换3D模型
所有形状都是多面体
虚拟世界与现实的最大不同是：没有东西是连续的，即所有东西都是离散的。例如，你无法在屏幕上显示一个完美的圆。你只能以一个正多边形表示圆：边越多，圆就越“完美”。
同理，在三维空间，每个 3D 模型都等同于一个 多面体（即 3D 模型只能由不弯曲的平面组成）。当我们讨论一个本身就是多面体（如立方体）的模型时并不足以为奇，但当我们想展示其它模型时，如球体时，就需要记住这个原理了。
保存一个多面体
想要保存一个多面体，就需要运用数学知识将其表示出来。你肯定在上学期间学过一些基本的几何知识。以正方形为例，你需要定义 ABCD 四个标识符，它们分别代表正方形的每个直角。
我们的 3D 引擎也一样。我们从保存模型的每个顶点开始。然后，模型的每个面都会被这些顶点所标注。
我们需要正确的结构体去表示顶点。因此，我们创建一个类去存储顶点的坐标。
|
1 2 3 4 5 |
var Vertex = function(x, y, z) { this.x = parseFloat(x); this.y = parseFloat(y); this.z = parseFloat(z); }; |
现在我们可以像下面这样创建顶点了。
|
1 |
var A = new Vertex(10, 20, 0.5); |
接着，我们创建一个类去表示多面体。我们以立方体为例。下面是该类的定义，后面会有相应的解释。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var Cube = function(center, size) { // Generate the vertices // 生成多个顶点 var d = size / 2; this.vertices = [ new Vertex(center.x - d, center.y - d, center.z + d), new Vertex(center.x - d, center.y - d, center.z - d), new Vertex(center.x + d, center.y - d, center.z - d), new Vertex(center.x + d, center.y - d, center.z + d), new Vertex(center.x + d, center.y + d, center.z + d), new Vertex(center.x + d, center.y + d, center.z - d), new Vertex(center.x - d, center.y + d, center.z - d), new Vertex(center.x - d, center.y + d, center.z + d) ]; // Generate the faces // 生成面 this.faces = [ [this.vertices[0], this.vertices[1], this.vertices[2], this.vertices[3]], [this.vertices[3], this.vertices[2], this.vertices[5], this.vertices[4]], [this.vertices[4], this.vertices[5], this.vertices[6], this.vertices[7]], [this.vertices[7], this.vertices[6], this.vertices[1], this.vertices[0]], [this.vertices[7], this.vertices[0], this.vertices[3], es[0], this.vertices[3], 组。 我们可以在网页中轻易地展示图片或其他平面形状。然而，当要展示 3D 模型时，事情就不那么简单了，因为三维空间比二维空间更复杂。为了实现 3D 效果，我们可以使用专门的技术和库，如 WebGL 和 Three.js。 然而，如果你只是想展示一些基本形状时，如立方体，那么这些技术就显得大材小用了。另外，使用它们并不会帮助你理解其工作原理，或解答如何在平面中显示 3D 形状的疑问。 我编写这篇教程的目的是：阐述如何在 web 中构建一个简单的 3D 引擎（无 WebGL）。我们将首先学习如何存储 3D 模型，然后学习如何在两种不同视图（正视图和透视图）中展示这些形状。 保存和转换3D模型所有形状都是多面体虚拟世界与现实的最大不同是：没有东西是连续的，即所有东西都是离散的。例如，你无法在屏幕上显示一个完美的圆。你只能以一个正多边形表示圆：边越多，圆就越“完美”。 同理，在三维空间，每个 3D 模型都等同于一个 多面体（即 3D 模型只能由不弯曲的平面组成）。当我们讨论一个本身就是多面体（如立方体）的模型时并不足以为奇，但当我们想展示其它模型时，如球体时，就需要记住这个原理了。
保存一个多面体想要保存一个多面体，就需要运用数学知识将其表示出来。你肯定在上学期间学过一些基本的几何知识。以正方形为例，你需要定义 我们的 3D 引擎也一样。我们从保存模型的每个顶点开始。然后，模型的每个面都会被这些顶点所标注。
现在我们可以像下面这样创建顶点了。
接着，我们创建一个类去表示多面体。我们以立方体为例。下面是该类的定义，后面会有相应的解释。
通过这个类，我们只需指定中心和边长就可创建一个虚拟的立方体。 |
