 Making walls from 2 points - Vertices to worldspace

Hey, I wanna make walls from two points. Im calculating the distance between the points to get the width ( height and thickness are static ). Then I draw a cube with the given dimensions and change its pivot point to the starting point instead of center and add it to a container obj at (0, 0, 0). The container’s position is set to the starting point. After that I calculate the container’s needed rotation (Angle) to reach the second point exactly.
So far so good. The walls rotate correctly and are positioned right

If I have multiple walls now. there’ll always be a gap where the corners wont meet. So i wanna distort the cuboid by offsetting the vertices.
I take two outer vertices from each, the wall and the previouse wall, to get two lines. Then I calculate the intersection point of the two lines and offset the vertex points.

The problem is that the vertex vector is in local space of the container. I need to get the world space coordinates to calculate the intersection point. Then I have to calc the difference between the vertex and the intersection point and add it in local space to the vertices, right?

I got this function to calculate the intersection point:

private get2LineIntersectionPoint(p1: THREE.Vector2, p2: THREE.Vector2, p3: THREE.Vector2, p4: THREE.Vector2) {

// Check if none of the lines are of length 0
if ((p1.x === p2.x && p1.y === p2.y) || (p3.x === p4.x && p3.y === p4.y)) {
return null
}

let denominator = ((p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y))

// Lines are parallel
if (denominator === 0) {
return null
}

let ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator
let ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator

// // is the intersection along the segments
//   if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
//       return null
//   }

// Return a object with the x and y coordinates of the intersection
let x = p1.x + ua * (p2.x - p1.x)
let y = p1.y + ua * (p2.y - p1.y)

return new THREE.Vector2(x, y)
}

but kinda stuck getting the worldspace vertex vectors
I know the object.getWorldPosition(target) function, but that does not work

Also open for new ways of building those walls

Hi!
Feel free to search Resources category: ProfiledContourGeometry, ProfiledContourGeometry MultiMaterial

@prisoner849 Thats looking very nice, but I need to have my walls seperated so I can interact with them. Is that possible somehow? I want for example to click and drag walls on x/z axes keeping them connected

Feel free to extend the provided examples. Right now I don’t have a ready-to-use solution.

I got it to work with Object3D.localToWorld .

public connectToNextWall(nextWall: Wall) {

//    Y
//    |
//    |
//    |
//   4| +--------+ 1
//    |/|       /|
//    / |      / |
// 5 +--------+ 0|
//   || |     |  |
//   |6 +_____|__+ 3
//  S|+/______|_/+E___________ X
//   |/       |/
// 7 +--------+ 2
//
this.obj.updateMatrixWorld()
nextWall.obj.updateMatrixWorld()

// OUTER CORNERS OF CUBOID
// Get all outer vertices from this.wall (5, 7) and nextWall (0, 2) and make two lines from their position
// Get intersection point from two lines and position outer vertex to it

let v1 = Utility.convertV3toV2( this.obj.localToWorld(this.geometry3D.vertices.clone()) )
let v2 = Utility.convertV3toV2( this.obj.localToWorld(this.geometry3D.vertices.clone()) )
let v3 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices.clone()) )
let v4 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices.clone()) )

let outerIntersectionPoint: THREE.Vector2 = this.get2LineIntersectionPoint(v1, v2, v3, v4)

if(outerIntersectionPoint) {

// THIS : outer vertices at end
let OIP: THREE.Vector3 = new THREE.Vector3(outerIntersectionPoint.x, 0, outerIntersectionPoint.y)
this.obj.worldToLocal(OIP)

// y=this.h at end point
this.geometry3D.vertices.x = OIP.x
this.geometry3D.vertices.y = this.h
this.geometry3D.vertices.z = OIP.z

// y=0 at end point
this.geometry3D.vertices.x = OIP.x
this.geometry3D.vertices.y = OIP.y
this.geometry3D.vertices.z = OIP.z

// Next : outer vertices at start
let nextOIP: THREE.Vector3 = new THREE.Vector3(outerIntersectionPoint.x, 0, outerIntersectionPoint.y)
nextWall.obj.worldToLocal(nextOIP)

// y=this.h at start point
nextWall.geometry3D.vertices.x = nextOIP.x
nextWall.geometry3D.vertices.y = this.h
nextWall.geometry3D.vertices.z = nextOIP.z

// y=0 at start point
nextWall.geometry3D.vertices.x = nextOIP.x
nextWall.geometry3D.vertices.y = nextOIP.y
nextWall.geometry3D.vertices.z = nextOIP.z
}

// INNER CORNERS OF CUBOID
// Get all inner vertices from this.wall (4, 6) and nextWall (1, 3) and make two lines from their position
// Get intersection point from two lines and position inner vertex to it

let v5 = Utility.convertV3toV2( this.obj.localToWorld(this.geometry3D.vertices.clone()) )
let v6 = Utility.convertV3toV2( this.obj.localToWorld(this.geometry3D.vertices.clone()) )
let v7 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices.clone()) )
let v8 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices.clone()) )

let innerIntersectionPoint: THREE.Vector2 = this.get2LineIntersectionPoint(v5, v6, v7, v8)

if(innerIntersectionPoint) {

// THIS : inner vertices at end
let OIP: THREE.Vector3 = new THREE.Vector3(innerIntersectionPoint.x, 0, innerIntersectionPoint.y)
this.obj.worldToLocal(OIP)

// y=this.h at end point
this.geometry3D.vertices.x = OIP.x
this.geometry3D.vertices.y = this.h
this.geometry3D.vertices.z = OIP.z

// y=0 at end point
this.geometry3D.vertices.x = OIP.x
this.geometry3D.vertices.y = OIP.y
this.geometry3D.vertices.z = OIP.z

// Next : inner vertices at start
let nextOIP: THREE.Vector3 = new THREE.Vector3(innerIntersectionPoint.x, 0, innerIntersectionPoint.y)
nextWall.obj.worldToLocal(nextOIP)

// y=this.h at start point
nextWall.geometry3D.vertices.x = nextOIP.x
nextWall.geometry3D.vertices.y = this.h
nextWall.geometry3D.vertices.z = nextOIP.z

// y=0 at start point
nextWall.geometry3D.vertices.x = nextOIP.x
nextWall.geometry3D.vertices.y = nextOIP.y
nextWall.geometry3D.vertices.z = nextOIP.z
}
}

private get2LineIntersectionPoint(p1: THREE.Vector2, p2: THREE.Vector2, p3: THREE.Vector2, p4: THREE.Vector2) {

// Check if none of the lines are of length 0
if ((p1.x === p2.x && p1.y === p2.y) || (p3.x === p4.x && p3.y === p4.y)) {
return null
}

let denominator = ((p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y))

// Lines are parallel
if (denominator === 0) {
return null
}

let ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator
let ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator

// // is the intersection along the segments
//   if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
//       return null
//   }

// Return a object with the x and y coordinates of the intersection
let x = p1.x + ua * (p2.x - p1.x)
let y = p1.y + ua * (p2.y - p1.y)

return new THREE.Vector2(x, y)
}