Drawing walls in 3d space from X, Y coordinates

Questions
1

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.scene.add(mesh);
}

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;
scene.add(shapeMeshWall1);
	
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;
scene.add(shapeMeshWall2);
	
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;
scene.add(shapeMeshWall3);
	
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;
scene.add(shapeMeshWall4);

You’ll see for walls 2 and 4 I have rotated the mesh to get them to draw in the other 3D coordinate, which works fine, but I want to do this without knowing which walls to rotate if that makes sense?

Thanks for your time in reading this! Any help appreciated.

2

I think I have managed to solve it with quaternions, I knew it had to be a simple fix!

1 Like