Threejs使用Shapes实现不规则几何体，自定义绘图

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：使用Shapes实现不同规则几何体。效果图如下：

​

2，实现说明

形状（Shape）使用路径以及可选的孔洞来定义一个二维形状平面。 它可以和ExtrudeGeometry、ShapeGeometry一起使用，获取点，或者获取三角面；Shape – three.js中文文档 (yanhuangxueyuan.com)

three.js examples案例库 (yanhuangxueyuan.com)

 这里延伸一下，假如有个需求需要在墙上挖孔或者两面墙合并在一起应该怎么做呢？因为Three.js没有提供用于几何体运算的构造函数，需要借助ThreeBSP.js库实现。

有兴趣可以查看这位博主关于ThreeBSP.js扩展库的介绍：ThreeBSP布尔运算_three.js教程_郭隆邦技术博客 (yanhuangxueyuan.com)

帽子形状，曲线SplineCurve查看文档SplineCurve – three.js中文文档 (yanhuangxueyuan.com)

// 根据集合点，创建一条平滑的二维曲线
let curve = new THREE.SplineCurve([
	new THREE.Vector2(-20, 80),
	new THREE.Vector2(-20, 150),
	new THREE.Vector2(-100, 150),
	new THREE.Vector2(-100, 80),
]);
// 样条曲线均匀分割100分，返回51个顶点坐标
let points = curve.getPoints(10);
let randomShape = new THREE.Shape(points);
let randomMesh = new THREE.Mesh(new THREE.ShapeGeometry(randomShape), new THREE.MeshPhongMaterial({
	side: THREE.DoubleSide,
	color: 0xafc0ca
}));
scene.add(randomMesh);

// 返回多边形均匀分布点
let spacedPoints = randomShape.getSpacedPoints(50);
// 返回多边形顶点
// let spacedPoints = randomShape.getPoints();
let geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints(spacedPoints);
let particles = new THREE.Points(geometrySpacedPoints, new THREE.PointsMaterial({
	color: "#ff5500",
	size: 4
}));
particles.position.z = 25;
scene.add(particles);

五边形状，构造函数Shape查看文档Shape – three.js中文文档 (yanhuangxueyuan.com)

let splinepts = [];
splinepts.push(new THREE.Vector2(170, 100));
splinepts.push(new THREE.Vector2(150, 150));
splinepts.push(new THREE.Vector2(80, 170));
splinepts.push(new THREE.Vector2(50, 100));
splinepts.push(new THREE.Vector2(90, 120));

let splineShape = new THREE.Shape(splinepts);
let geometry = new THREE.ShapeGeometry(splineShape);
let mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
	side: THREE.DoubleSide,
	color: 0xafc0ca
}));
scene.add(mesh);

挖孔圆，方法absarc查看文档Path – three.js中文文档 (yanhuangxueyuan.com)

let arcShape = new THREE.Shape();
arcShape.absarc(-50, -30, 40, 0, Math.PI * 2, false);
let holePath = new THREE.Path();
holePath.absarc(-50, -30, 10, 0, Math.PI * 2, true);

arcShape.holes.push(holePath);
let arcMesh = new THREE.Mesh(new THREE.ShapeGeometry(arcShape), new THREE.MeshPhongMaterial({
	side: THREE.DoubleSide,
	color: 0xafc0ca
}));
scene.add(arcMesh);

 心形状，方法bezierCurveTo查看文档Path – three.js中文文档 (yanhuangxueyuan.com)

var x = 120,
	y = -90;
let heartShape = new THREE.Shape();
heartShape.moveTo(x + 25, y + 25)
heartShape.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y)
heartShape.bezierCurveTo(x - 30, y, x - 30, y + 35, x - 30, y + 35)
heartShape.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95)
heartShape.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35)
heartShape.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y)
heartShape.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25);
let heartMesh = new THREE.Mesh(new THREE.ShapeGeometry(heartShape), new THREE.MeshPhongMaterial({
	side: THREE.DoubleSide,
	color: 0xafc0ca
}));
scene.add(heartMesh);

绘制地图，首先获取geojson地图数据，然后​​​​使用Shape绘制地图形状，可参考如下文章

threejs快速生成地图的方式以及代码_搬砖小田的博客-CSDN博客_threejs 地图

ThreeJS读取GeoJson文件，绘制地图板 - 昜木辰deブログ - 博客园 (cnblogs.com)

在线预览：左本的博客 (zuoben.top)