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
@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
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[7].clone()) )
let v2 = Utility.convertV3toV2( this.obj.localToWorld(this.geometry3D.vertices[2].clone()) )
let v3 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices[2].clone()) )
let v4 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices[7].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[0].x = OIP.x
this.geometry3D.vertices[0].y = this.h
this.geometry3D.vertices[0].z = OIP.z
// y=0 at end point
this.geometry3D.vertices[2].x = OIP.x
this.geometry3D.vertices[2].y = OIP.y
this.geometry3D.vertices[2].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[5].x = nextOIP.x
nextWall.geometry3D.vertices[5].y = this.h
nextWall.geometry3D.vertices[5].z = nextOIP.z
// y=0 at start point
nextWall.geometry3D.vertices[7].x = nextOIP.x
nextWall.geometry3D.vertices[7].y = nextOIP.y
nextWall.geometry3D.vertices[7].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[6].clone()) )
let v6 = Utility.convertV3toV2( this.obj.localToWorld(this.geometry3D.vertices[3].clone()) )
let v7 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices[3].clone()) )
let v8 = Utility.convertV3toV2( nextWall.obj.localToWorld(nextWall.geometry3D.vertices[6].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[1].x = OIP.x
this.geometry3D.vertices[1].y = this.h
this.geometry3D.vertices[1].z = OIP.z
// y=0 at end point
this.geometry3D.vertices[3].x = OIP.x
this.geometry3D.vertices[3].y = OIP.y
this.geometry3D.vertices[3].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[4].x = nextOIP.x
nextWall.geometry3D.vertices[4].y = this.h
nextWall.geometry3D.vertices[4].z = nextOIP.z
// y=0 at start point
nextWall.geometry3D.vertices[6].x = nextOIP.x
nextWall.geometry3D.vertices[6].y = nextOIP.y
nextWall.geometry3D.vertices[6].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)
}
