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绘制地图形状，可参考如下文章
