How to draw walls in ThreeJS from path or 2d array?
<p>I need to draw a 3d house model (walls only) from a 2d path or array (explained later) I receive from <code>FabricJS</code> editor I've built. The type of data sent from 2d to 3d views doesn't matter.</p>

<p>My first (and only quite close to what I want to get) attempt was to create the array of 1s and zeros based on the room I want to draw, and then render it in ThreeJS as one cuboid per 'grid'. I based this approach on <a href="https://github.com/IceCreamYou/Nemesis" rel="nofollow noreferrer">this ThreeJS game demo</a>. So if the array look like this:</p>

<pre><code>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,],
       ];
</code></pre>

<p>I iterate through the array and render one block for every <code>1</code>, and calculate it's position from indexes from the 2d 'map' (my array). </p>

<pre><code>var UNITSIZE = 250, units = mapW;
for (var i = 0; i &lt; mapW; i++) {
    for (var j = 0, m = map[i].length; j &lt; 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);
        }
    }
}
</code></pre>

<p>It worked great till I wanted to place other models (.obj, but it doesn't matter. Let's call them <code>furniture</code>) near the walls. Each piece of furniture has it's <code>(x=0, y=0, z=0)</code> point in the center of the model, and since walls are cubes (with the same coord system, with 0 point in the center), furniture are rendered in the center of the wall (when we place it in the corner, only 1/4 of the model is visible). This is more/less how it looks like:</p>

<p><a href="https://i.stack.imgur.com/hWBV6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hWBV6.png" alt="kitchen in 3d"></a>
(black - how the walls should look like,  blue - each cuboid of the wall, red - piece of furniture)</p>

<p>Thats why I would like to render walls as planes, probably from a 2d closed patch (I can export it from Fabric without a problem). I don't need walls to be thick nor to be visible "from behind", when camera moves through the wall. Any clues on how to achieve something like this?</p>

<p>"Help me StackOverflow, your my only hope."</p>