Matarialize中文社区-Three.js 中的CapsuleGeometry使用

Three.js 中的CapsuleGeometry使用

少陵野老 2024-11-30 09:05:13

27 CapsuleGeometry 专栏

在三维图形学中，**胶囊体（Capsule）**是一种常用于碰撞检测和物理模拟的几何体。它由一个圆柱体与两个半球端点组成，形状类似于药丸或者胶囊，因此得名。Three.js 中的 CapsuleGeometry 是用来创建胶囊体几何体的工具，它不仅适用于简单的三维物体渲染，还广泛应用于物理模拟、角色控制、碰撞检测等场景。

本文将详细介绍 CapsuleGeometry 的使用方法，包括其所有的属性、方法，结合多个应用场景的示例代码，帮助大家全面掌握这个几何体类的使用技巧。

一、`CapsuleGeometry` 概述

CapsuleGeometry 是 Three.js 提供的一个创建胶囊体几何体的类，它继承自 BufferGeometry，因此它具有较高的性能，并适用于高效渲染。

1.1 `CapsuleGeometry` 构造函数

CapsuleGeometry 的构造函数接受以下参数：

const geometry = new THREE.CapsuleGeometry(radius, length, radialSegments, heightSegments);

参数说明：

radius: 胶囊体的半径，控制胶囊体的圆形部分的大小。
length: 胶囊体的长度，即圆柱体的高度，两个半球的总长度就是 length。
radialSegments: 控制圆形部分的细分程度，决定了横向的分割数目。默认值是 8。
heightSegments: 控制胶囊体纵向的分割数目，决定了胶囊体的段数。默认值是 1。

1.2 `CapsuleGeometry` 的特点

适用于物理与碰撞检测：胶囊体常用于物理模拟中，尤其是角色模型的碰撞检测，因为它相比立方体更接近人体形态，适合模拟角色的移动与碰撞。
可定制：可以通过调整 radius 和 length 来改变胶囊体的大小，通过 radialSegments 和 heightSegments 来控制几何体的精细度。

二、`CapsuleGeometry` 的基本使用

2.1 创建一个简单的胶囊体

创建一个简单的胶囊体并将其添加到场景中：

// 创建一个半径为 1、长度为 5 的胶囊体几何体
const geometry = new THREE.CapsuleGeometry(1, 5);

// 创建一个基本材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 使用几何体和材质创建网格
const capsule = new THREE.Mesh(geometry, material);

// 将胶囊体添加到场景
scene.add(capsule);

在这个例子中，我们创建了一个半径为 1，长度为 5 的胶囊体，并赋予其一个绿色的基础材质。

2.2 使用更高精度的胶囊体

为了使胶囊体的表面更加光滑，可以增加 radialSegments 和 heightSegments：

// 创建一个半径为 1、长度为 5、精细化的胶囊体
const geometry = new THREE.CapsuleGeometry(1, 5, 16, 2);

// 创建一个基本材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });

// 使用几何体和材质创建网格
const capsule = new THREE.Mesh(geometry, material);

// 将胶囊体添加到场景
scene.add(capsule);

通过将 radialSegments 设置为 16 和 heightSegments 设置为 2，胶囊体的细节更加丰富，并显示为线框模式。

三、`CapsuleGeometry` 的属性和方法

作为 BufferGeometry 的子类，CapsuleGeometry 拥有 BufferGeometry 的所有属性和方法。你可以通过访问 geometry.attributes 来操作顶点、法线、UV 坐标等信息。

3.1 顶点位置属性

通过 geometry.attributes.position 获取顶点的位置信息：

// 获取胶囊体的顶点位置数据
const positions = geometry.attributes.position.array;
console.log(positions);

该数组包含了所有顶点的 3D 坐标，按顺序排列。

3.2 法线属性

法线信息通常用于光照计算，通过 geometry.attributes.normal 获取法线数据：

// 获取法线数据
const normals = geometry.attributes.normal.array;
console.log(normals);

3.3 UV 坐标

UV 坐标用于纹理映射，可以通过 geometry.attributes.uv 获取：

// 获取 UV 坐标数据
const uvs = geometry.attributes.uv.array;
console.log(uvs);

四、`CapsuleGeometry` 的高级用法

4.1 添加纹理映射到胶囊体

你可以将纹理应用到胶囊体上，使其看起来更加生动。下面是一个给胶囊体添加纹理的示例：

// 创建一个胶囊体几何体
const geometry = new THREE.CapsuleGeometry(1, 5);

// 加载纹理
const texture = new THREE.TextureLoader().load('path/to/texture.jpg');

// 创建一个材质，应用纹理
const material = new THREE.MeshBasicMaterial({ map: texture });

// 创建网格并将几何体和材质组合
const capsule = new THREE.Mesh(geometry, material);

// 将胶囊体添加到场景
scene.add(capsule);

在这个示例中，我们使用 TextureLoader 加载了一张纹理，并将其应用到胶囊体的材质上。

4.2 动态调整胶囊体的大小

CapsuleGeometry 的尺寸可以在运行时动态调整。例如，下面的代码演示了如何修改胶囊体的半径和长度：

// 动态修改胶囊体的半径和长度
geometry.parameters.radius = 2;
geometry.parameters.length = 6;
geometry.dispose();  // 更新几何体

在运行时更新 geometry.parameters 后，需要调用 dispose() 方法来清理旧的几何体数据，以便重新计算。

4.3 使用胶囊体进行物理模拟

CapsuleGeometry 通常用于物理引擎的碰撞检测和角色控制中。通过将其与物理引擎结合，可以实现更真实的物理效果。下面是一个结合 Cannon.js 引擎使用胶囊体的例子：

// 创建物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // 设置重力

// 创建胶囊体的物理形状
const shape = new CANNON.Cylinder(1, 1, 5, 16); // 这里使用了 Cylinder 因为胶囊体的物理形状通常可以看作两个半球连接的圆柱体
const body = new CANNON.Body({
  mass: 1, // 质量
  position: new CANNON.Vec3(0, 10, 0), // 初始位置
});

// 将物理形状添加到物理世界
body.addShape(shape);
world.addBody(body);

// 更新物理世界
function updatePhysics() {
  world.step(1 / 60);
  capsule.position.copy(body.position);
  capsule.quaternion.copy(body.quaternion);
  
  requestAnimationFrame(updatePhysics);
}
updatePhysics();

在这个例子中，我们结合 Cannon.js 创建了一个物理世界，将胶囊体作为一个物理实体添加到场景中，模拟了重力作用。