Three.js中的3D几何体基础：从入门到实践-CSDN博客

Three.js中的3D几何体基础：从入门到实践

three.js JavaScript 3D Library. 项目地址: https://gitcode.com/gh_mirrors/th/three.js

前言

Three.js作为一款强大的WebGL库，为开发者提供了丰富的3D几何体（Geometry）功能。本文将深入探讨Three.js中的各种几何体类型，帮助开发者理解如何创建和使用这些基础形状来构建3D场景。

几何体概述

在Three.js中，几何体（Geometry）是3D形状的基础构建块。它们定义了物体的形状和结构，而材质（Material）则定义了物体的外观。Three.js提供了多种内置几何体类型，从简单的立方体到复杂的多面体，应有尽有。

基本几何体类型

1. 基础几何体

BoxGeometry（立方体）：最简单的3D形状，由6个面组成
SphereGeometry（球体）：参数包括半径、宽度分段和高度分段
CylinderGeometry（圆柱体）：可以创建各种圆柱形物体
ConeGeometry（圆锥体）：圆柱体的变体，顶部半径为零
PlaneGeometry（平面）：2D矩形，常用于地面或墙面

2. 多面体

TetrahedronGeometry（四面体）：4个三角形面
OctahedronGeometry（八面体）：8个三角形面
DodecahedronGeometry（十二面体）：12个五边形面
IcosahedronGeometry（二十面体）：20个三角形面

3. 特殊几何体

TorusGeometry（圆环）：类似甜甜圈的形状
TorusKnotGeometry（环形结）：复杂的环形结形状
LatheGeometry（旋转体）：通过旋转2D轮廓创建的3D形状
ExtrudeGeometry（挤出几何体）：从2D形状挤出3D形状
TextGeometry（文本几何体）：3D文本

几何体的创建与使用

创建几何体的基本模式是：

const geometry = new THREE.BoxGeometry(width, height, depth);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

几何体细分

许多几何体都支持细分参数，这决定了几何体的精细程度：

// 低细分球体
const lowSphere = new THREE.SphereGeometry(5, 8, 6);

// 高细分球体
const highSphere = new THREE.SphereGeometry(5, 32, 32);

细分程度的选择需要在视觉效果和性能之间找到平衡。过多的细分会导致性能下降，而过少的细分则会影响视觉效果。

特殊案例处理

1. 文本几何体

创建3D文本需要先加载字体：

const loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
  const geometry = new THREE.TextGeometry('Hello', {
    font: font,
    size: 5,
    height: 1
  });
  // 创建网格并添加到场景
});

2. 线框几何体

Three.js提供了两种特殊的线框几何体：

EdgesGeometry：只显示边缘
WireframeGeometry：显示完整的线框

const geometry = new THREE.BoxGeometry(10, 10, 10);
const edges = new THREE.EdgesGeometry(geometry);
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0x000000}));
scene.add(line);

3. 点云

使用Points和PointsMaterial可以创建点云效果：

const geometry = new THREE.SphereGeometry(5, 32, 32);
const material = new THREE.PointsMaterial({
  color: 0xff0000,
  size: 0.1
});
const points = new THREE.Points(geometry, material);
scene.add(points);