transformControls

by black strings

HTML

<script type="text/javascript" src="https://stlogsystem.com.br/demos/assets/lib/threejs/build/three.min.js"></script>
<script type="text/javascript" src="https://stlogsystem.com.br/demos/assets/lib/threejs/examples/js/controls/OrbitControls.js"></script>  
<script type="text/javascript" src="https://stlogsystem.com.br/demos/assets/lib/threejs/examples/js/controls/TransformControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene, axesHelper, camera, renderer, mouse, raycaster, intersects, objectIntersects, light, mesh3D, box, transformControls, plane, helper, gridHelper, controls, isActive, clone1, clone2, collider1, collider2;

var collider1LastPosition = new THREE.Vector3();
var collider2LastPosition = new THREE.Vector3();

init();

render();

function init() {
  scene = new THREE.Scene();
  axesHelper = new THREE.AxesHelper(20);
  scene.add(axesHelper);
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(-5, 5, 5);
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  raycaster = new THREE.Raycaster();
  mouse = new THREE.Vector2();
  intersects = new THREE.Vector3();

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  light = new THREE.DirectionalLight(0xffffff);
  light.position.set(3, 4, 1);
  scene.add(light);

  scene.add(new THREE.AmbientLight(0x404040));

  mesh3D = new THREE.Mesh();

  //mesh3D.rotation.x = -Math.PI / 2;

  box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshLambertMaterial({
    color: "brown"
  }));

  box.geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
  
  box.translateX(3);
  
  clone1 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshLambertMaterial({
    color: "brown"
  }));
  clone1.geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
  
  clone2 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshLambertMaterial({
    color: "brown"
  }));
  clone2.geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
  
  mesh3D.add(box);
  mesh3D.add(clone1);
  
  collider1LastPosition.copy(box.position);
  collider2LastPosition.copy(clone1.position);
  
  //mesh3D.add(clone2);

  transformControls = new THREE.TransformControls(camera,...