ThreeJS入门（096）：THREE.Shape 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 096篇入门文章

THREE.Shape 是 Three.js 中用于构建二维形状的一个类。它允许开发者定义和操作复杂的二维几何图形，这些图形可以用于创建线条、填充形状或者是作为三维几何体的基础。THREE.Shape 类似于 THREE.Path，但是它提供了更多的功能来处理封闭的形状。

基本构造

THREE.Shape 类的构造函数接受一个可选的 points 参数，该参数是一个包含初始顶点坐标的数组。如果没有提供这个参数，则创建一个没有顶点的空形状。

const shape = new THREE.Shape([ // 可选的points参数
    new THREE.Vector2(-10, -10),
    new THREE.Vector2(10, -10),
    new THREE.Vector2(10, 10),
    new THREE.Vector2(-10, 10)
]);

方法

THREE.Shape 类提供了以下一些方法来定义和操作形状：

• moveTo(x, y)：将路径的起点移动到 (x, y) 位置。
• lineTo(x, y)：从当前位置画一条直线到 (x, y) 位置。
• quadraticCurveTo(aCPx, aCPy, aX, aY)：从当前位置画一条二次贝塞尔曲线，其中 (aCPx, aCPy) 是控制点的位置，(aX, aY) 是结束点的位置。
• bezierCurveTo(aCP1x, aCP1y, aCP2x, aCP2y, aX, aY)：从当前位置画一条三次贝塞尔曲线，其中 (aCP1x, aCP1y) 和 (aCP2x, aCP2y) 是两个控制点的位置，(aX, aY) 是结束点的位置。
• arc(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise)：从当前位置开始画一段圆弧，其中 (aX, aY) 是圆心的位置，aRadius 是半径，aStartAngle 和 aEndAngle 是起始和结束的角度（以弧度计），aClockwise 表示是否顺时针绘制。
• closePath()：关闭当前路径，即画一条直线回到路径的起点。
• getPoints(tesselation) [DEPRECATED]：根据给定的细分程度 tesselation 返回一系列路径上的点。注意，此方法已过时，建议使用 THREE.ShapeUtils.points()。
• clone()：返回一个新的 THREE.Shape 对象，其属性与当前形状相同。
• translate(x, y)：将形状平移 x 和 y 的距离。
• rotate(theta)：绕着原点旋转形状，theta 是旋转的角度（以弧度计）。
• makePolygon(sides, radius, x, y)：创建一个多边形，sides 是边的数量，radius 是半径，(x, y) 是中心的位置。
• toJSON()：将形状转换为 JSON 字符串。
• fromJSON(json)：从 JSON 字符串恢复形状。

示例

创建一个基本的 THREE.Shape 对象，并绘制路径：

// 创建一个形状
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(10, 10);
shape.quadraticCurveTo(20, 5, 30, 10);
shape.bezierCurveTo(40, 15, 50, 5, 60, 10);
shape.arc(70, 10, 10, 0, Math.PI * 2, true);
shape.closePath();

// 创建几何体
const geometry = new THREE.ShapeGeometry(shape);

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

// 创建网格
const mesh = new THREE.Mesh(geometry, material);

// 将网格添加到场景中
scene.add(mesh);

使用 THREE.Shape 在 Three.js 中

THREE.Shape 在 Three.js 中主要用于定义封闭的二维形状，并可以用来创建各种几何体，如线条、填充形状等。通过组合多个路径操作，可以创建复杂的图形。

示例：创建一个带有形状的场景

假设你想在一个 Three.js 场景中创建一个由多个路径操作组成的复杂图形：

// 创建一个形状
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(10, 10);
shape.quadraticCurveTo(20, 5, 30, 10);
shape.bezierCurveTo(40, 15, 50, 5, 60, 10);
shape.arc(70, 10, 10, 0, Math.PI * 2, true);
shape.closePath();

// 创建几何体
const geometry = new THREE.ShapeGeometry(shape);

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

// 创建网格
const mesh = new THREE.Mesh(geometry, material);

// 将网格添加到场景中
scene.add(mesh);

这段代码展示了如何使用 THREE.Shape 创建一个由多个路径操作组成的复杂图形，并在该路径上绘制一个物体。

总结

THREE.Shape 是一个用于定义二维形状的类，提供了丰富的操作方法来定义形状。通过这些方法，你可以创建复杂的图形，并利用这些形状来创建各种几何体。在 Three.js 的许多功能中，THREE.Shape 对于实现复杂的形状绘制和几何体创建非常重要。理解并熟练使用 THREE.Shape 对于开发高质量的 Three.js 应用程序是非常有帮助的。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。特别是 THREE.Shape.getPoints() 方法已被标记为废弃，建议使用 THREE.ShapeUtils.points() 或其他替代方法。