如何从2D平面图分割掩码生成兼容Web Viewer的3D Mesh

看起来你已经顺利用AI分割出了平面图的墙体掩码，接下来要把这个2D的墙体区域挤压成3D网格，还得兼容Web查看器对吧？我来一步步给你拆解实现方法～

核心思路 #

你的方向完全对：把墙体的2D「footprint」（也就是掩码里的白色区域）沿着垂直方向挤压到指定高度，就能得到墙体的3D模型。为了让模型兼容Web，我们最后导出成GLB/GLTF格式——这是目前Web 3D领域的通用标准，Three.js、Babylon.js等主流Web引擎都能直接加载。

具体步骤&代码实现 #

我们需要用到trimesh这个轻量的3D网格处理库，它能帮我们快速完成「2D轮廓→挤压3D→导出Web格式」的流程，先安装它：

pip install trimesh

接下来完善你的代码，从掩码提取轮廓、生成3D模型并导出：

import cv2
import numpy as np
import trimesh

# 你原来的参数（这里把墙高改成米单位，更符合3D场景直觉，原150若为厘米则对应1.5米）
wall_height = 1.5
img_path = 'output_mask.png'

# 1. 加载并处理掩码图像（沿用你的逻辑，稍作调整）
img = cv2.imread(img_path)
original_height, original_width = img.shape[:2]

# 调整尺寸（保持你原来的缩放逻辑）
new_width = 1024
new_height = int((new_width / original_width) * original_height)
img_resized = cv2.resize(img, (new_width, new_height))

# 提取白色墙体区域（你的原代码）
walls = np.zeros(img_resized.shape[:2], dtype=np.uint8)
walls[(img_resized == [255, 255, 255]).all(axis=2)] = 255

# 2. 提取墙体的闭合轮廓（关键步骤）
# 兼容不同OpenCV版本的返回值格式
contours, hierarchy = cv2.findContours(walls, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

# 把轮廓转换成trimesh能识别的2D路径，同时修正坐标系
paths = []
for cnt in contours:
    # 过滤小噪声轮廓，避免生成冗余面
    if cv2.contourArea(cnt) < 100:
        continue
    # OpenCV原点在左上角，3D场景通常原点在底部，翻转Y轴让模型方向更合理
    cnt_2d = cnt.squeeze()[:, [0, 1]]  # 提取轮廓的x、y坐标
    cnt_2d[:, 1] = new_height - cnt_2d[:, 1]
    # 转换成trimesh的2D路径对象
    path = trimesh.load_path(cnt_2d)
    paths.append(path)

# 3. 把2D路径挤压成3D网格
combined_path = trimesh.util.concatenate(paths)
# 自动生成挤压后的侧面、顶面、底面
wall_mesh = combined_path.extrude(height=wall_height)

# 4. 导出成Web兼容的GLB格式
wall_mesh.export('wall_model.glb')

关键细节解释 #

1. 轮廓提取：用cv2.findContours提取墙体的外轮廓，过滤小噪声是为了避免模型出现多余的细碎面。
2. 坐标系修正：OpenCV的图像原点在左上角，3D场景里习惯把原点放在底部，翻转Y轴后模型的朝向会更符合日常直觉。
3. 挤压生成网格：trimesh.Path2D.extrude()会自动帮我们处理顶点和面的拼接，不用手动写复杂的3D几何逻辑。
4. 导出格式选择：GLB是二进制的GLTF格式，体积小、加载快，完美适配所有Web 3D查看器。

后续Web查看 #

导出的wall_model.glb可以直接用主流Web 3D方案加载：

• 嵌入到自定义Web项目中，用Three.js的GLTFLoader直接渲染
• 用开源的Web 3D查看器工具打开（很多免费的开源实现，直接搜就能找到）

这样你就得到了一个能在Web上流畅展示的墙体3D模型啦～

备注：内容来源于stack exchange，提问作者Shahroz Atiq