如何从路径或二维数组在 ThreeJS 中绘制墙壁？

Question

我需要从我创建的FabricJS 编辑器收到的 2d 路径或数组（稍后解释）绘制一个 3d 房屋模型（仅限墙壁）。从 2d 视图发送到 3d 视图的数据类型无关紧要。

我的第一个尝试（并且只是非常接近我想要得到的）尝试是根据我要绘制的房间创建 1 和 0 的数组，然后在 ThreeJS 中将其渲染为每个“网格”一个长方体。我将这种方法基于this ThreeJS game demo。所以如果数组看起来像这样：

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 渲染一个块，并根据二维“地图”（我的数组）的索引计算它的位置。

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);
        }
    }
}

在我想在墙壁附近放置其他模型（.obj，但没关系。我们称它们为furniture）之前，它的效果很好。每件家具在模型的中心都有它的(x=0, y=0, z=0) 点，并且由于墙壁是立方体（具有相同的坐标系，中心为 0 点），因此家具被渲染在墙壁的中心（当我们放置它在角落里，只有模型的 1/4 是可见的）。这或多或少是这样的：

（黑色 - 墙壁应该是什么样子，蓝色 - 墙壁的每个长方体，红色 - 一件家具）

这就是为什么我想将墙壁渲染为平面，可能来自 2d 封闭补丁（我可以毫无问题地从 Fabric 导出它）。当相机穿过墙壁时，我不需要墙壁很厚，也不需要“从后面”看到。关于如何实现这样的目标的任何线索？

“帮助我 StackOverflow，这是我唯一的希望。”

Answer 1

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

类似的东西

var coordArray = [...]; //Array of corner points of a closed shape from your source. Here assumed to be THREE.Vector2() for simplicity.

var walls = new THREE.Geometry();

for(var i = 0; i < coordArray.length(); i++){ //iterate over the coordinate array, pushing vertices to the geometry
  var coordinates = coordArray[i];
  walls.vertices.push(new THREE.Vector3(coordinates.x, coordinates.y, 0)); //vertex at floor level
  walls.vertices.push(new THREE.Vector3(coordinates.x, coordinates.y, 10)); //vertex at the top part of the wall, directly above the last
}
var previousVertexIndex = walls.vertices.length - 2; // index of the vertex at the bottom of the wall, in the segment we are creating faces for
for(var i = 0; i < walls.vertices.length; i += 2){
  walls.faces.push(new THREE.Face3(i, i + 1, previousVertexIndex));
  walls.faces.push(new THREE.Face3(i + 1, previousVertexIndex + 1, previousVertexIndex));
  previousVertexIndex = i;
}
walls.computeVertexNormals();
walls.computeFaceNormals();

scene.add(new THREE.Mesh(walls, new THREE.MeshLambertMaterial());