Three.js 快速入门教程 05 - 几何体 材质 网格模型

在第一篇教程中已经简要介绍过了几何体、材质和网格模型的含义与联系，即几何体用来表示三维物体的几何形状，材质用来表示物体的外观效果，网格模型则是将几何体和材质组合起来，作为 Three.js 的一个基本物体单位，可以被添加进场景里。

对于一个 Three.js 项目来说，不仅可以通过加载模型文件的方式添加模型，还可以通过纯代码的方向添加模型，又或者是通过代码对模型文件的部分参数进行调整。本篇将详细讲解这部分的内容。

几何体

常见几何体

几何体即我们在数学中学过的那些基本立体几何图形，Three.js 提供了针对常见几何体的手工创建方法

// 长方体 (参数：长，宽，高)
const boxGeometry = new THREE.BoxGeometry(100, 100, 100);
// 球体 (参数：半径)
const sphereGeometry = new THREE.SphereGeometry(50);
// 圆柱 (参数：顶部半径，底部半径，高)
const cylinderGeometry = new THREE.CylinderGeometry(50, 50, 100);
// 圆锥 (参数：底部半径，高)
const coneGeometry = new THREE.ConeGeometry(5, 20);
// 平面 (参数：长，宽)
const planeGeometry = new THREE.PlaneGeometry(100, 50);

分段数

分段数用于定义几何体的曲面细分程度。由于曲面实际是由切分成一个个小平面组合而成，分段数决定了切分的数量。因此可以通过增加分段数，可以使几何体的曲面更加平滑和精细。

创建几何体时可传入分段数参数，在原构造参数的基础上，可追加一个参数表示分段数

// 球体
const sphereGeometry = new THREE.SphereGeometry(50, 10);
/