Boxgeometry from point A to B

Questions
1

Hi, trying to develop a method to draw a box geometry (width W and height H) from point A (x1, y1, Z1) to B (X2, Y2, Z2)

started with the vector sub method to calculate length. Then I don’t exaclty konw how to calculate starting point and rotation… any one worked on this issue already ?


 function waveBeamAB(w,h,x1,y1,z1,x2,y2,z2, color: String = '333333')
{
  const a = new  Vector3(x1,y1,z1 );
 
  const b = new Vector3(x2,y2,z2 );

  let c=b.sub(a)
    
    const boxGeometry = new BoxGeometry(w, c.length(), h);
    const boxMaterial = new MeshLambertMaterial({ color: '#' + color });
    var box = new Mesh(boxGeometry, boxMaterial);
    box.position.set(x1, y1, z1);
    box.rotation.set(0, 0,Math.PI/2);
    return box;
}
2

BoxGeometry is created as a cube that’s uniform in all directions - ie. mirrored on all axes. If you’d like to create a box geometry between two points, in a way that it’s faces touch these two points, all you need to do is place the box at:

box.position.copy(pointA);
box.position.lerp(pointB, 0.5);

And set the size of the box to pointB.clone().sub(pointA).multiplyScalar(0.5).length() on all axes.

1 Like
3

Just as an option:

class AlignedBox extends THREE.Mesh{
  constructor(w, h, x1, y1, z1, x2, y2, z2, color = "888888"){
    let a = new THREE.Vector3(x1, y1, z1);
    let b = new THREE.Vector3(x2, y2, z2);
    let l = a.distanceTo(b);
    let g = new THREE.BoxGeometry(w, h, l).translate(0, 0, l * 0.5);
    let m = new THREE.MeshLambertMaterial({color: "#" + color});
    super(g, m);
    this.position.copy(a);
    this.lookAt(b);
  }
}

...
let alignedBox = new AlignedBox(1, 1, -2, -1, 1, 4, 2, 3);
scene.add(alignedBox);

изображение
изображение854×853 18.9 KB

Demo: Edit fiddle - JSFiddle - Code Playground

1 Like
4

thanks , waouh quick replies