I am faced with the task of creating a 3D house model, specifically the walls, using a 2D path or array that I receive from a FabricJS editor that I have developed. The specific type of data being transferred from the 2D to 3D views is not critical.
My initial attempt, which was the closest to the desired outcome, involved creating an array of 1s and 0s based on the room layout I intended to draw. I then proceeded to render it in ThreeJS as individual cuboids per 'grid'. This approach was inspired by a ThreeJS game demo found at this link. Here is an example of what the array might look like:
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,],
];
By iterating through the array, I was able to render a block for each '1', positioning it based on the indexes from the 2D 'map' (my array).
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);
}
}
}
While this method worked well for the walls, it presented challenges when I tried to position other models (in .obj format, for example) near the walls. These furniture pieces have their (x=0, y=0, z=0) point at the center of the model. Since the walls are cubes with the same coordinate system and a center at 0, the furniture models ended up being rendered in the center of the walls, resulting in only a quarter of the model being visible when placed in a corner. This is illustrated in the image below:
https://i.sstatic.net/hWBV6.png (black - desired wall appearance, blue - individual cuboids of the wall, red - furniture piece)
That's why I am considering rendering the walls as planes, possibly using a 2D closed patch that can be exported from Fabric without any issues. I do not require the walls to have thickness or be visible from the back when the camera moves through them. Any suggestions on how to achieve this type of rendering?
"Help me StackOverflow, you're my only hope."