Shape

THREE.Shape 是 Three.js 提供的用于创建 2D 形状的工具，它允许你定义复杂的平面形状，并可以用于生成 3D 物体，如 ExtrudeGeometry（拉伸几何体）或 ShapeGeometry（直接用作 2D 平面）。

1. 创建 `THREE.Shape`

THREE.Shape 继承自 THREE.Path，用于定义封闭的 2D 形状，可以通过 moveTo、lineTo、bezierCurveTo 和 quadraticCurveTo 等方法来创建形状路径。

创建一个简单的矩形形状

const shape = new THREE.Shape();
shape.moveTo(0, 0); // 移动到起点
shape.lineTo(0, 5); // 画一条线到 (0, 5)
shape.lineTo(5, 5);
shape.lineTo(5, 0);
shape.lineTo(0, 0); // 闭合路径

2. `ShapeGeometry`：用于创建 2D 形状网格

你可以使用 ShapeGeometry 直接将上面的 Shape 转换为 2D 可渲染的几何体。

将 `THREE.Shape` 变成一个 `THREE.Mesh`

const shapeGeometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(shapeGeometry, material);
scene.add(mesh);

这个代码会创建一个红色的矩形，并将其添加到 Three.js 场景中。

3. `ExtrudeGeometry`：将 2D 形状拉伸成 3D 物体

如果你想将 Shape 变成一个 3D 物体，可以使用 ExtrudeGeometry，同样适用上面的Shape 数据。

创建一个拉伸的 3D 形状

const extrudeSettings = {
  depth: 2, // 拉伸深度
  bevelEnabled: true, // 是否启用斜角
  bevelThickness: 0.5, // 斜角厚度
  bevelSize: 0.5, // 斜角大小
  bevelSegments: 5, // 斜角段数
};
 
const extrudeGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const extrudeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const extrudeMesh = new THREE.Mesh(extrudeGeometry, extrudeMaterial);
scene.add(extrudeMesh);

这个代码会创建一个绿色的 3D 物体，形状基于 THREE.Shape，并有一定的拉伸深度。

4. 创建复杂形状（例如带孔的形状）

你可以在 THREE.Shape 中添加 holes（孔洞），这样可以创建镂空的几何体。

创建一个带洞的矩形

const shapeWithHole = new THREE.Shape();
shapeWithHole.moveTo(0, 0);
shapeWithHole.lineTo(0, 10);
shapeWithHole.lineTo(10, 10);
shapeWithHole.lineTo(10, 0);
shapeWithHole.lineTo(0, 0);
 
// 添加一个孔
const hole = new THREE.Path();
hole.moveTo(3, 3);
hole.lineTo(3, 7);
hole.lineTo(7, 7);
hole.lineTo(7, 3);
hole.lineTo(3, 3);
 
// 将孔洞添加到形状
shapeWithHole.holes.push(hole);
 
const shapeWithHoleGeometry = new THREE.ShapeGeometry(shapeWithHole);
const shapeWithHoleMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide });
const shapeWithHoleMesh = new THREE.Mesh(shapeWithHoleGeometry, shapeWithHoleMaterial);
scene.add(shapeWithHoleMesh);

这个代码创建了一个带有内部镂空的小矩形的形状。

创建一个五角星

const shape = new THREE.Shape();
shape.moveTo(0, 4); // 上方点
shape.lineTo(1, 2); // 右上
shape.lineTo(3, 2); // 右下
shape.lineTo(2, 0); // 底部中心
shape.lineTo(3, -2); // 左下
shape.lineTo(0, -1); // 左下角
shape.lineTo(-3, -2); // 右下角
shape.lineTo(-2, 0); // 底部中心
shape.lineTo(-3, 2); // 左下
shape.lineTo(-1, 2); // 左上
shape.lineTo(0, 4); // 回到起点（闭合）
 
// 直接生成几何体
const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({ color: 0xff5733, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

5. `THREE.Shape` 常见方法

方法	作用
`moveTo(x, y)`	移动到指定坐标，不画线
`lineTo(x, y)`	从当前点画一条直线到指定点
`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`	画一条三次贝塞尔曲线
`quadraticCurveTo(cpx, cpy, x, y)`	画一条二次贝塞尔曲线
`absarc(x, y, radius, startAngle, endAngle, clockwise)`	画一个圆弧
`absellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise)`	画一个椭圆
`splineThru(pointsArray)`	画一条样条曲线

总结

THREE.Shape 用于创建 2D 形状。
ShapeGeometry 直接渲染 2D 形状。
ExtrudeGeometry 可以将 2D 形状拉伸为 3D 物体。
holes 可用于创建镂空形状。
可以使用 lineTo、moveTo、bezierCurveTo 等方法定义路径。

React 安装和配置 TransformControls平移

Shape

1. 创建 THREE.Shape