(二十七) THREE.ExtrudeGeometry 知识详解

阿铎前端

于 2024-12-05 13:26:04 发布

阅读量524

点赞数 3

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： vue Three.js

本文链接：https://blog.csdn.net/mad970906/article/details/144264437

three.js 专栏收录该内容

55 篇文章

订阅专栏

THREE.ExtrudeGeometry 是 Three.js 中用于创建挤出几何体的一个类。挤出几何体是从一个二维路径（轮廓）通过沿着某个方向（通常是 Z 轴）“挤出”一定的距离来生成三维几何体。这种方法非常适合创建各种三维模型，如字母、符号、标志等。

构造函数

构造函数 new THREE.ExtrudeGeometry(shape, extrudeSettings) 接受两个参数来定义挤出几何体的形状和挤出设置。

参数说明

shape：一个 THREE.Shape 对象，定义了要挤出的二维轮廓。
extrudeSettings：一个包含挤出参数的对象，可选参数包括：

amount：挤出的距离，默认为 100。

bevelEnabled：是否启用倒角，默认为 true。

bevelThickness：倒角厚度，默认为 10。

bevelSize：倒角大小，默认为 8。

bevelSegments：倒角分割数量，默认为 1。

steps：挤出路径分割的数量，默认为 1。

curveSegments：曲线分割数量，默认为 12。

uvGenerator：UV 坐标生成器，默认为 THREE.ExtrudeGeometryUVGenerator。

示例

创建一个简单的挤出几何体：

const shape = new THREE.Shape();
shape.moveTo(10, 10);
shape.lineTo(90, 10);
shape.lineTo(90, 90);
shape.lineTo(10, 90);
shape.closePath();

const extrudeSettings = {
    amount: 20,
    bevelEnabled: false
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

这将创建一个矩形轮廓，并沿 Z 轴挤出 20 个单位的距离。由于 bevelEnabled 设置为 false，所以没有倒角效果。

使用 `THREE.ExtrudeGeometry`

创建挤出几何体之后，通常需要为它添加一个材质，并创建一个 THREE.Mesh 对象来将其添加到场景中。

示例

创建一个带有红色漫反射材质的挤出几何体：

const shape = new THREE.Shape();
shape.moveTo(10, 10);
shape.lineTo(90, 10);
shape.lineTo(90, 90);
shape.lineTo(10, 90);
shape.closePath();

const extrudeSettings = {
    amount: 20,
    bevelEnabled: false
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

使用其他材质

除了 THREE.MeshBasicMaterial 之外，你还可以使用其他材质，比如 THREE.MeshStandardMaterial 或 THREE.MeshPhysicalMaterial 等，这些材质支持物理基渲染（Physically Based Rendering, PBR），可以使你的挤出几何体看起来更加真实。

const shape = new THREE.Shape();
shape.moveTo(10, 10);
shape.lineTo(90, 10);
shape.lineTo(90, 90);
shape.lineTo(10, 90);
shape.closePath();

const extrudeSettings = {
    amount: 20,
    bevelEnabled: false
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88, metalness: 0.5, roughness: 0.5 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

使用纹理

你也可以使用纹理贴图来定义挤出几何体的外观：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

const shape = new THREE.Shape();
shape.moveTo(10, 10);
shape.lineTo(90, 10);
shape.lineTo(90, 90);
shape.lineTo(10, 90);
shape.closePath();

const extrudeSettings = {
    amount: 20,
    bevelEnabled: false
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({ map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

调整挤出设置

通过调整 extrudeSettings 中的参数，可以改变挤出几何体的外观。例如，启用倒角效果：

const shape = new THREE.Shape();
shape.moveTo(10, 10);
shape.lineTo(90, 10);
shape.lineTo(90, 90);
shape.lineTo(10, 90);
shape.closePath();

const extrudeSettings = {
    amount: 20,
    bevelEnabled: true,
    bevelThickness: 5,
    bevelSize: 5,
    bevelSegments: 2
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

这将创建一个带倒角的挤出几何体，倒角的厚度和大小分别为 5，倒角分割数量为 2。

使用 `THREE.ExtrudeBufferGeometry`

在 Three.js 中，推荐使用 THREE.ExtrudeBufferGeometry 替代 THREE.ExtrudeGeometry，因为 BufferGeometry 类型提供了更高效的顶点数据存储方式，更适合现代 WebGL 渲染引擎。

const shape = new THREE.Shape();
shape.moveTo(10, 10);
shape.lineTo(90, 10);
shape.lineTo(90, 90);
shape.lineTo(10, 90);
shape.closePath();

const extrudeSettings = {
    amount: 20,
    bevelEnabled: true,
    bevelThickness: 5,
    bevelSize: 5,
    bevelSegments: 2
};

const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

THREE.ExtrudeGeometry 是一个用于创建挤出几何体的类，它通过挤出一个二维轮廓来生成三维几何体。通过结合不同的材质和纹理贴图，可以实现丰富的视觉效果。调整挤出设置可以改变几何体的外观，例如启用倒角效果。为了获得更好的性能，建议使用 THREE.ExtrudeBufferGeometry。挤出几何体在许多场景中都非常有用，特别是在需要创建字母、符号、标志等三维模型时。