Threejs - move connected side

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>
To move object A to object B's vertices. You must explicitly call B.updateMatrixWorld() after transforming object B if you cannot wait for the next frame to be rendered.

Then you can grab one of its vertices and make other objects move to it by using localToWorld.

If not calling updateMatrixWorld explicitly, you have to ensure you are getting the vertices after the next frame has kicked in. render frame calls the object's update matrixWorld for you.
</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...