Javascript 如何从path或2d阵列绘制三面墙？

我需要从我从

FabricJS

编辑器生成的2d路径或阵列（稍后解释）中绘制3d房屋模型（仅限墙壁）。从二维视图发送到三维视图的数据类型无关紧要

我的第一次（也是唯一一次接近我想要的）尝试是根据我想要绘制的房间创建1和0的数组，然后将其渲染为三个J，每个“网格”一个长方体。我是基于这个方法的。因此，如果数组如下所示：

var map = [ //1  2  3  4  5  6  7  8
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
          [1, 1, 0, 0, 0, 0, 0, 1, 1, 1,], // 1
          [1, 1, 0, 0, 1, 0, 0, 0, 0, 1,], // 2
          [1, 0, 0, 0, 1, 1, 0, 0, 0, 1,], // 3
          [1, 0, 0, 1, 1, 1, 1, 0, 0, 1,], // 4
          [1, 0, 0, 0, 1, 1, 0, 0, 1, 1,], // 5
          [1, 1, 1, 0, 0, 0, 0, 1, 1, 1,], // 6
          [1, 1, 1, 0, 0, 1, 0, 0, 1, 1,], // 7
          [1, 1, 1, 1, 1, 1, 0, 0, 1, 1,], // 8
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
       ];

我遍历数组，为每个

1

渲染一个块，并根据2d“map”（我的数组）的索引计算它的位置

var UNITSIZE=250，units=mapW；
对于（变量i=0；i

在我想把其他模型（.obj，但这没关系。让我们把它们叫做

家具
）靠近墙壁的地方之前，它工作得很好。每件家具的
（x=0，y=0，z=0）
点位于模型的中心，并且由于墙是立方体（使用相同的坐标系，0点位于中心），因此家具在墙的中心渲染（当我们将其放置在拐角处时，只有模型的1/4可见）。大致是这样的：


（黑色-墙壁的外观，蓝色-墙壁的每个长方体，红色-家具）

这就是为什么我希望将墙渲染为平面，可能是从二维闭合面片（我可以毫无问题地从Fabric导出）。当摄像机穿过墙壁时，我不需要墙壁很厚，也不需要“从后面”看得到。关于如何实现这样的目标有什么线索吗

“帮助我StackOverflow，我唯一的希望。”
您可以手动填充THREE.js网格的顶点和面数组，因此如果您可以将所需的闭合路径导出为坐标数组，您可以对其进行迭代，并将所需信息推送到墙对象

像这样的


var-coordArray=[…]//源中闭合形状的角点数组。为了简单起见，这里假设为3.Vector2（）。
var walls=新的三个几何体（）；
对于（var i=0；iscene.add（new THREE.Mesh（walls，new THREE.MeshLambertMaterial（））；
您可以手动填充THREE.js网格的顶点和面数组，因此如果您可以将所需的闭合路径导出为坐标数组，则可以对其进行迭代，并将所需信息推送到墙对象

像这样的


var coordArray=[…]；//源代码中闭合形状的角点数组。为了简单起见，这里假定为三个。Vector2（）。
var walls=新的三个几何体（）；
对于（var i=0；i
效果很好（我只需要更新不同的顶点，因为方向不好），谢谢！效果很好（我只需要更新不同的顶点，因为方向不好），谢谢！
var UNITSIZE = 250, units = mapW;
for (var i = 0; i < mapW; i++) {
    for (var j = 0, m = map[i].length; j < m; j++) {
        if (map[i][j]) {
            var wall = new t.Mesh(cube, material);
            wall.position.x = (i - units/2) * UNITSIZE;
            wall.position.y = WALLHEIGHT/2;
            wall.position.z = (j - units/2) * UNITSIZE;
            scene.add(wall);
        }
    }
}