三维世界的基石：点与线

Three.js 入门教程（四）：构建三维世界中的基础元素（点和线）

在计算机图形学中，三维世界是由无数个点构建而成的。这些点在空间中具有特定坐标，可以形成各种几何图形。最基本的几何图形是点 ，它只占据一个单一位置。两个点可以连接形成一条线 ，而三个不在一条直线上的点可以构成一个三角形 。通过组合三角形，我们可以创建更加复杂的几何图形，例如多边形、球体和立方体。

在 Three.js 中，我们可以使用 Geometry 类来定义几何图形。Geometry 类包含一个顶点数组，每个顶点由其在三维空间中的 x、y 和 z 坐标定义。连接这些顶点的边构成图元的线框。

创建点和线

创建点非常简单，只需使用 Points 类：

const points = new THREE.Points(geometry, material);

其中 geometry 是一个包含点坐标的 Geometry 对象，而 material 是一个指定点外观的 Material 对象。

创建线也类似，我们可以使用 Line 类：

const line = new THREE.Line(geometry, material);

同样，geometry 是一个包含线段顶点的 Geometry 对象，而 material 是指定线段外观的 Material 对象。

构建三角形和其他几何图形

通过组合点和线，我们可以构建更复杂的几何图形。例如，我们可以创建一个三角形：

const triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
triangleGeometry.vertices.push(new THREE.Vector3(1, 0, 0));
triangleGeometry.vertices.push(new THREE.Vector3(0, 1, 0));
triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
const triangle = new THREE.Mesh(triangleGeometry, material);

在上面的示例中，我们创建了一个 Geometry 对象，并添加了三个顶点。然后，我们添加了一个 Face3 对象，它定义了三角形的三个顶点。最后，我们使用 Mesh 类将 Geometry 对象和 Material 对象组合在一起，创建一个可渲染的三维网格。

通过这种方式，我们可以构建各种几何图形，例如正方形、立方体、球体和管道。这些几何图形构成了三维世界中的基础元素，为构建复杂场景和交互式体验提供了无限的可能性。