three.js如何基于建筑墙体数据集程序化生成匹配的地面平面

你完全可以直接基于已有的用户点击顶点数组程序化生成匹配建筑形状的基准平面，不需要从墙体参数反推，实现逻辑非常简单：

实现思路 #

你存储在batims[i][4]中的点击坐标就是建筑的边界顶点数据，和你生成墙体用的是同一套数据源，直接用这些顶点生成多边形平面即可，保证和墙体完全对齐无误差：

1. 把所有边界顶点按照你现有的坐标转换规则，转换成Three.js场景内的坐标
2. 使用THREE.Shape连接所有顶点生成自定义多边形形状
3. 基于Shape生成平面几何体，旋转到地面所在的XZ平面即可

代码实现 #

你可以直接在生成墙体的逻辑前后添加以下代码：

const mapWidth = batims[i][2];
const mapHeight = batims[i][3];
const offsetX = Math.floor(mapWidth / 2);
const offsetZ = Math.floor(mapHeight / 2);
const shapePoints = [];

// 遍历所有顶点生成Shape的二维坐标数组
for (let c = 0; c < batims[i][4].length; c += 2) {
  const pointX = batims[i][4][c] - offsetX;
  const pointZ = batims[i][4][c + 1] - offsetZ;
  shapePoints.push(new THREE.Vector2(pointX, pointZ));
}

// 生成多边形形状和几何体
const buildingShape = new THREE.Shape(shapePoints);
const basePlaneGeo = new THREE.ShapeGeometry(buildingShape);
const basePlaneMat = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  transparent: true,
  opacity: 0.3,
  side: THREE.DoubleSide
});
const buildingBasePlane = new THREE.Mesh(basePlaneGeo, basePlaneMat);

// 默认ShapeGeometry是XY平面，旋转90度变为XZ平面贴合地面
buildingBasePlane.rotation.x = -Math.PI / 2;
// 要放到对应楼层仅需调整y坐标，比如2层高度为 hstair * 2
buildingBasePlane.position.y = 0;
scene.add(buildingBasePlane);

// 后续直接将设备组作为基准平面的子对象添加即可，设备坐标直接沿用原有地图转换后的相对坐标
// buildingBasePlane.add(equipmentGroup);

注意事项 #

• 如果建筑边界是凹多边形，出现几何体面缺失的情况，可以引入Earcut库做更稳定的多边形三角剖分，替换默认的ShapeGeometry生成逻辑
• 多层建筑需要每层生成基准平面时，可复用同一个Shape和几何体，仅修改Mesh的position.y即可，降低性能损耗
• 如果你需要把平面作为设备定位的父容器，不需要额外调整设备的旋转参数，父容器的坐标体系已经和建筑完全对齐

内容的提问来源于stack exchange，提问作者Wolden