Threejs - collision

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<p>
Box3 and Box2.
Box3 setFromObject will account for the mesh's not position.
Box2 doesn't have setFromObject.
</p>

JavaScript

var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(5,5,5));
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var gh = new THREE.GridHelper();
scene.add(gh);

class Side {
	constructor(start,end, thick, color){
  	this.thick = thick;
  	this.start = start;
    this.color = color;
    this.end = end;
  	this.mesh2D = new THREE.Mesh();
    this.mesh2;
    this.create2D();
  }
  create2D(){
  	var dist = this.start.distanceTo(this.end);
  	var vec2s = [
      new THREE.Vector2(0,0),
      new THREE.Vector2(0,this.thick),
      new THREE.Vector2(dist,this.thick),
      new THREE.Vector2(dist,0),
    ]
    var shape = new THREE.Shape(vec2s);
    var sGeo = new THREE.ShapeGeometry(shape);
    sGeo.applyMatrix(new THREE.Matrix4().makeTranslation(-dist/2,0,0));
    this.mesh2 = new THREE.Mesh(sGeo, new THREE.MeshBasicMaterial({
    	transparent: true, opacity: .8, color: this.color ? this.color : 0xff00ff}));
    this.mesh2D.add(this.mesh2);
    this.alignMeshPositionToSide(this.mesh2D);
    this.alignMeshRotationToSide(this.mesh2D);
    
    // axis
    //var ah = new THREE.AxisHelper(this.thick+1);
    //this.mesh2D.add(ah);
  }
  alignMeshRotationToSide(mesh) {
    const direction = new THREE.Vector3();
    direction.subVectors(this.end.clone(), this.start.clone());
    direction.normalize();

    if (direction.x === -1) {
      // In the special case where dir.x === -1,
      // the setFromUnitVectors() method does not calculate the...