从几何体入门 three.js（上）

走进 three.js 的几何体世界

three.js 是一个用于创建和渲染 3D 动画和交互的 JavaScript 库，它被广泛应用于游戏开发、虚拟现实、数据可视化等领域。three.js 的核心概念之一就是几何体，它定义了 3D 对象的形状和结构。

本篇文章将深入剖析 three.js 中的几何体，从最基本的几何体（如长方体、立方体）到更复杂的几何体（如圆柱体、球体），并提供详实的代码示例和图片，帮助您理解并使用 three.js 来创建复杂而美丽的 3D 场景。

长方体和立方体：构建 3D 空间的基础

长方体和立方体是最基本的几何体，它们可以用来构建各种各样的 3D 场景。长方体有六个面，每个面都是一个矩形；立方体有六个面，每个面都是一个正方形。

// 创建一个长方体
const geometry = new THREE.BoxGeometry(1, 2, 3);

// 创建一个立方体
const geometry = new THREE.BoxGeometry(1);

圆柱体和圆锥体：旋转的艺术

圆柱体和圆锥体是通过旋转基本形状而形成的。圆柱体是由一个圆形旋转而成，而圆锥体是由一个三角形旋转而成。

// 创建一个圆柱体
const geometry = new THREE.CylinderGeometry(1, 2, 3, 32);

// 创建一个圆锥体
const geometry = new THREE.ConeGeometry(1, 2, 32);

球体：完美的对称

球体是一个完全对称的几何体，它由无数个点均匀分布在表面上形成。

// 创建一个球体
const geometry = new THREE.SphereGeometry(1, 32, 32);

环形：无限的循环

环形是一个类似于甜甜圈的几何体，它由一个圆柱体旋转而成。

// 创建一个环形
const geometry = new THREE.TorusGeometry(1, 0.3, 16, 100);

复杂几何体：无限可能

除了这些基本几何体之外，three.js 还支持各种各样的复杂几何体，这些几何体可以通过组合基本几何体或使用数学函数来创建。

// 创建一个复杂几何体
const geometry = new THREE.DodecahedronGeometry(1);

结语

three.js 中的几何体是创建 3D 场景的基础，通过了解和使用这些几何体，您可以创建各种各样的 3D 模型和场景。在下一篇博文中，我们将继续深入探讨 three.js 中的其他重要概念，例如材质、灯光和相机。