Convert 2D coordinates to 3D objects (walls)

[mario_vde]

Hi all,

I am currently creating a tool for a thesis, in ThreeJS.
I can create a 2D map that saves XY coordinates into a store. I want to use those coordinates to build walls in Threejs.

this results in this data object:

"wallNodes": [
        { "id": 1, "x": 2000, "y": 2200 },
        { "id": 2, "x": 2730, "y": 2200 },
        { "id": 3, "x": 2730, "y": 2500 },
        { "id": 4, "x": 2000, "y": 2500 }
      ],

I already read that the best way to build the walls is to use planes and use boxes for the elements that need to come inside the room.

Also, what would be the best solution to calculate the widths of the walls in 3JS? Now we store X and Y coordinates, but would we need to store the width also?
So, if anyone has some ideas or pointers how we could get this to work, would be awesome!

Thanks all!

[didi_softwares]

this is a part of code, i used to create walls in didisoftwares.ddns.net
var size x,y = floor square, z = wall size

case 'room2': {//floor and walls  
                objects[value] = new THREE.Group();
                var size = new THREE.Vector3(260, 140, 110);//ground width/height - wall size
                var floor = new THREE.Mesh(new THREE.BoxGeometry(size.x, size.y, 1), materials[97]);
                var wall1 = new THREE.Mesh(new THREE.PlaneGeometry(size.y, size.z), materials[96][4]);
                var wall2 = new THREE.Mesh(new THREE.PlaneGeometry(size.x, size.z), materials[96][4]);
                //new THREE.Mesh(new THREE.BoxGeometry(size.x, size.y - 30, size.z), materials[96]);
                wall1.position.y = ((size.z) / 2);
                wall2.position.y = (size.z) / 2;
                wall1.name = 'room_wall1';                
                wall2.name = 'room_wall2';
                var wall3 = wall1.clone();
                wall3.name = 'room_wall3';
                var wall4 = wall2.clone();
                wall4.name = 'room_wall4';                
                floor.rotation.x = -Math.PI / 2;
                floor.receiveShadow = true;
                wall1.rotation.y = -Math.PI / 2;
                wall1.position.x = (size.x / 2);                
                wall1.receiveShadow = true;
                wall2.position.z = -size.y / 2;
                wall2.receiveShadow = true;
                wall3.rotation.y = Math.PI / 2;
                wall3.position.x = -size.x / 2;
                wall4.position.z = size.y / 2;
                wall4.rotation.y = -Math.PI;
                objects[value].name = value + '_box';
                objects[value].add(floor);
                objects[value].add(wall1);
                objects[value].add(wall2);
                objects[value].add(wall3);
               objects[value].add(wall4);
                if (typeof (execute) == 'function') execute(objects[value]);
                break;
            }

[hofk]

Maybe you can use some of it?

Showrooms easy to generate from data of a construction drawing or dimensional sketch - now on Github

2022 - now on GitHub - hofk/SHOWROOM: Showrooms easy to generate from data of a construction drawing or dimensional sketch. Try it out. You look in the mirror first. Walk around. SHOWROOM You will find a whole range of tools for displaying buildings and rooms along with their furnishings. Among them are both firmly defined and interactive ones. In this case, the basis for the design of flexibly configurable rooms is a construction drawing or a simple dimensional sketch. The data is written…

---

UPDATE

If you want it to be really simple, you can do something like this.

ExtrudedShapeWithHole

(from the Collection of examples from discourse.threejs.org)

[manthrax]

GitHub - furnishup/blueprint3d: Build interior spaces in 3D

Check out the “Edit floor plan” section here:

http://furnishup.github.io/blueprint3d/example/