# Drawing walls in 3d space from X, Y coordinates

Hi,
I am trying to re-create drawing a “map” - walls, floors + ceiling - of 2D coordinates and I am getting in a bit of a muddle.
I can draw the floor + ceiling by iterating over the walls and using the x, y coords as a outline then create a THREE.shape and use move to and line to, then I use the same shape and adjust the Y position to suit the height.

When it comes to the walls however I am drawing the walls in one direction but instead of drawing a “box” it draws two planes in the X direction.

I am wanting to draw a minimum of 3 walls (a triangle effectively) and ‘n’ number of walls, I can achieve what I want if I manually rotate the mesh but how do I get it to do it automatically based on coordinates, I am sure I am missing something basic but I can’t see the wood for the trees.

Let me try and put an example for you…
This is what I have used to draw the floor + ceiling:

``````const shape = new THREE.Shape();
shape.moveTo(132, 118);
shape.lineTo(132, 118);
shape.lineTo(132, 138);
shape.lineTo(112, 138);
shape.lineTo(112, 118);
``````

This defines the shape / outline and the lineTo calls are the 4 (in this example) 2d wall coords.
I then draw the floor + ceiling using this:

``````drawFloorCeiling = (shape, y, ceil) => {
const mesh = new THREE.Mesh(
new THREE.ShapeBufferGeometry( shape ),
new THREE.MeshBasicMaterial({color: (!ceil ? 0x00ffff : 0xff0000), side: (this.USE_DOUBLESIDE ? THREE.DoubleSide : THREE.BackSide), wireframe: this.USE_WIREFRAME})
);
mesh.position.y = y;
mesh.rotation.x = Math.PI / 2;
if(!this.USE_DOUBLESIDE) {
if(ceil) {
mesh.material.side = THREE.FrontSide;
}
}
}
``````

This just changes the visible face and the colour depending on if it is a ceiling or not (cyan floor red ceiling).
Eventually I would like to texture the floor, ceiling and walls but I’ve gone with a solid colour for now.
Now for the bit I am stuck with, I need to take those 4 sets of 2d coords and “build walls” with it, i’ve tried using planes which work for 2 of the 4 walls, each wall can be textured / coloured differently so I can’t create a “shape” like with the floor / ceiling outline, I know I need to translate the Y of the 2D into the Z of 3D and I have a wall height that is known (currently set to 4).

Here is my “manual” code (from another attempt):

``````shapeMeshWall1 = new THREE.Mesh(
new THREE.PlaneGeometry(20, 4),
new THREE.MeshPhongMaterial({color: 0x0000ff, wireframe: USE_WIREFRAME})
);
shapeMeshWall1.geometry.center();
shapeMeshWall1.position.x = 122
shapeMeshWall1.position.z = 118
shapeMeshWall1.position.y = 0;

shapeMeshWall2 = new THREE.Mesh(
new THREE.PlaneGeometry(20, 4),
new THREE.MeshPhongMaterial({color: 0x0000ff, side: (USE_DOUBLESIDED ? THREE.DoubleSide : THREE.FrontSide), wireframe: USE_WIREFRAME})
);
shapeMeshWall2.geometry.center();
shapeMeshWall2.rotation.y -= Math.PI;
shapeMeshWall2.position.x = 122
shapeMeshWall2.position.z = 138
shapeMeshWall2.position.y = 0;

shapeMeshWall3 = new THREE.Mesh(
new THREE.PlaneGeometry(20, 4),
new THREE.MeshPhongMaterial({color: 0x00ff00, wireframe: USE_WIREFRAME})
);
shapeMeshWall3.geometry.center();
shapeMeshWall3.position.x = 132
shapeMeshWall3.position.z = 128
shapeMeshWall3.position.y = 0;
shapeMeshWall3.rotation.y -= Math.PI / 2;

shapeMeshWall4 = new THREE.Mesh(
new THREE.PlaneGeometry(20, 4),
new THREE.MeshPhongMaterial({color: 0x00ff00,  wireframe: USE_WIREFRAME})
);
shapeMeshWall4.geometry.center();
shapeMeshWall4.position.x = 112
shapeMeshWall4.position.z = 128
shapeMeshWall4.position.y = 0;
shapeMeshWall4.rotation.y = Math.PI / 2;