Matarialize中文社区-Three.js 中的 CircleGeometry 使用详解

Three.js 中的 CircleGeometry 使用详解

少陵野老 2024-12-27 18:04:45

53 CircleGeometry 专栏

Three.js 是一个功能强大的 3D 图形库，用于创建和渲染 WebGL 场景。CircleGeometry 是 Three.js 提供的几何体之一，专用于生成圆形平面。它非常适合创建如盘状物体、基础圆形平面等几何形状。本文将详细介绍 CircleGeometry 的使用，包括其构造函数参数、属性、方法，以及各种场景中的使用案例，并配以丰富的示例代码。

1. 什么是 `CircleGeometry`

CircleGeometry 是一个从 BufferGeometry 派生的类，表示一个二维圆形平面几何体。它可通过指定半径、分段数、起始角度和弧度范围来生成具有不同特性的圆形几何体。

其完整的构造函数如下：

const circle = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);

参数说明：

radius (可选):
圆的半径，默认为 1。
segments (可选):
圆的分段数，决定了圆的平滑度，默认值为 8。更高的值会生成更光滑的圆，但也会增加计算成本。
thetaStart (可选):
圆的起始角度，以弧度表示，默认值为 0。
thetaLength (可选):
圆的弧长，以弧度表示，默认值为 Math.PI * 2，表示完整的圆。

2. 创建基本圆形

以下是一个简单的例子，展示如何使用 CircleGeometry 创建一个基本的圆形。

示例：创建一个默认的圆形

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建圆形几何体和材质
const geometry = new THREE.CircleGeometry(1, 32); // 半径为 1，分段为 32
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const circle = new THREE.Mesh(geometry, material);

// 将圆形添加到场景
scene.add(circle);
camera.position.z = 5;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    circle.rotation.z += 0.01; // 添加简单的旋转动画
    renderer.render(scene, camera);
}
animate();

3. 使用分段数调整圆的平滑度

通过调整 segments 参数，可以生成多边形近似的圆或非常光滑的圆。

示例：创建不同分段数的圆

// 半径为 2，分段数分别为 4、16、64
const geometryLow = new THREE.CircleGeometry(2, 4);
const geometryMid = new THREE.CircleGeometry(2, 16);
const geometryHigh = new THREE.CircleGeometry(2, 64);

const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

const circleLow = new THREE.Mesh(geometryLow, material);
const circleMid = new THREE.Mesh(geometryMid, material);
const circleHigh = new THREE.Mesh(geometryHigh, material);

// 调整位置
circleLow.position.x = -5;
circleMid.position.x = 0;
circleHigh.position.x = 5;

// 添加到场景
scene.add(circleLow);
scene.add(circleMid);
scene.add(circleHigh);

4. 控制起始角度和弧度范围

thetaStart 和 thetaLength 用于创建部分圆，例如扇形或弧线。

示例：创建扇形和弧线

// 半径为 1，分段数为 32，起始角度为 0，弧长为 Math.PI / 2
const semiCircleGeometry = new THREE.CircleGeometry(1, 32, 0, Math.PI / 2);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const semiCircle = new THREE.Mesh(semiCircleGeometry, material);

// 调整位置
semiCircle.position.x = -2;

// 添加到场景
scene.add(semiCircle);

// 弧长覆盖三分之一圆
const partialCircleGeometry = new THREE.CircleGeometry(1, 32, Math.PI / 3, Math.PI / 3);
const partialCircle = new THREE.Mesh(partialCircleGeometry, material);
partialCircle.position.x = 2;

// 添加到场景
scene.add(partialCircle);

5. 高级用法：创建复杂效果

示例：与其他几何体结合使用

将 CircleGeometry 与其他几何体结合使用可以创造出复杂的对象。例如，使用多个圆形组合模拟环形。

// 创建两个圆
const outerCircle = new THREE.CircleGeometry(2, 64);
const innerCircle = new THREE.CircleGeometry(1.5, 64);

// 使用布尔运算器（如 CSG）生成环形
// 此处展示一个简单的差集概念
const ringMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const ring = new THREE.Mesh(outerCircle, ringMaterial);
ring.geometry.attributes.position.needsUpdate = true;

// 添加到场景
scene.add(ring);

6. 动态更新 `CircleGeometry`

CircleGeometry 不支持直接修改顶点数据，但可以通过重建几何体实现动态更新效果。

示例：动态改变圆的半径

let radius = 1;
function animate() {
    requestAnimationFrame(animate);

    radius += 0.01;
    if (radius > 2) radius = 1;

    // 重建几何体
    const newGeometry = new THREE.CircleGeometry(radius, 32);
    circle.geometry.dispose(); // 释放旧几何体的内存
    circle.geometry = newGeometry;

    renderer.render(scene, camera);
}
animate();

7. 实际应用场景

7.1 创建光照效果

将圆形几何体作为光源的平面，可以模拟如灯光、光环等效果。

const lightGeometry = new THREE.CircleGeometry(1, 32);
const lightMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.5 });
const lightMesh = new THREE.Mesh(lightGeometry, lightMaterial);
scene.add(lightMesh);