在三维网络世界中任意驰骋，WebGL入门之几何体

3D WebGL入门之几何体

在上一篇文章中，我们创建了一个拥有相机和一些灯光的Three.js的场景。下一步我们要把物体放到场景中。为了方便学习，我们将从一个简单的几何体——立方体开始。

何为几何体？

在计算机图形学中，几何体是一个三维物体，由一系列顶点、边和面组成。顶点是几何体中单个点的坐标，边是连接两个顶点的线段，而面是定义几何体形状的多边形。

在Three.js中，几何体是一个类，它定义了如何存储和渲染几何数据。Three.js提供了许多预定义的几何体类，例如立方体、球体、圆柱体和圆锥体。我们也可以通过自定义几何体类来创建自己的几何体。

创建几何体

要创建一个几何体，我们可以使用Three.js提供的预定义几何体类，也可以通过自定义几何体类来创建自己的几何体。

使用预定义几何体类

要使用预定义几何体类，我们可以简单地实例化该类。例如，要创建一个立方体，我们可以使用以下代码：

const geometry = new THREE.BoxGeometry(1, 1, 1);

自定义几何体类

要自定义几何体类，我们可以继承Three.js的BufferGeometry类。BufferGeometry类定义了如何存储和渲染几何数据。

class MyGeometry extends THREE.BufferGeometry {

  constructor() {

    super();

    // 定义几何体顶点数据
    const vertices = new Float32Array([
      -1.0, -1.0, 1.0,
      1.0, -1.0, 1.0,
      1.0, 1.0, 1.0,
      -1.0, 1.0, 1.0,
      -1.0, -1.0, -1.0,
      1.0, -1.0, -1.0,
      1.0, 1.0, -1.0,
      -1.0, 1.0, -1.0,
    ]);

    // 定义几何体索引数据
    const indices = new Uint16Array([
      0, 1, 2,
      2, 3, 0,
      4, 5, 6,
      6, 7, 4,
      0, 3, 7,
      7, 4, 0,
      1, 2, 6,
      6, 5, 1,
      2, 3, 7,
      7, 6, 2,
      0, 4, 5,
      5, 1, 0,
    ]);

    // 设置几何体顶点数据
    this.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

    // 设置几何体索引数据
    this.setIndex(new THREE.BufferAttribute(indices, 1));

  }

}

渲染几何体

要渲染几何体，我们需要将几何体添加到场景中，然后使用Three.js的渲染器来渲染场景。

// 将几何体添加到场景中
scene.add(geometry);

// 使用渲染器渲染场景
renderer.render(scene, camera);

结语

通过这篇文章，我们学习了如何创建和渲染几何体。在下一篇文章中，我们将学习如何为几何体添加材质。