Threejs-TransformControl

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>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TransformControls.js"></script>
 <div id="consoles">
 </div>
 <div>
    <input id="toggleBtn" type="Button" value="toggle transform"/>
     <input id="toggleSpaceBtn" type="Button" value="toggle local/world"/>
     <input id="toggleMeshBtn" type="Button" value="toggle mesh"/>
     <input id="nudgeMoveBtn" type="Button" value="nudgeMove"/>
    </div>

CSS

body {
    overflow: hidden;
}

JavaScript

var camera, renderer, controls;
var mesh, helper;

var origPos = new THREE.Vector3();
var toggleValue = 0;
var spaceValue = 0;
var meshValue = 0;
var activeMesh = null;
var grabSpotMaterial =  grabSpotMaterial = new THREE.MeshBasicMaterial({color:0x0000ff, side: THREE.Front});

init();
render();

function init() {
    
    var camType = 'persp';
    if(camType === 'persp'){
      // perspective cam
      camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.set(11, 111, 211);
    }else{

      // ortho cam
      camera = createOrthoCamera(window.innerWidth, window.innerHeight);
    }

    scene = new THREE.Scene();

    meshes = [];
    
    //mesh1
    var mat = new THREE.MeshBasicMaterial({opacity: .6, transparent: true, color: 0x00f0ff});
    var mesh = new THREE.Mesh( new THREE.BoxGeometry(120, 0, 120), mat );
    scene.add(mesh);
    mesh.position.x -= 120;
    activeMesh = mesh;
    meshes.push(mesh);
    
		//mesh2
		mesh = meshes[0].clone();
    mesh.position.x += 360;
    scene.add(mesh);
    meshes.push(mesh);
    
    //mesh3
    var shapeGeo = createShapeGeo([[0,0],[0,150],[60,180],[120,180],[120,0]]);
    mesh = new THREE.Mesh(shapeGeo, mat);
    meshes.push(mesh);
    createCorners(mesh);
    scene.add(mesh);
    
    
    
    // create side
    /*
    var v1 = mesh.geometry.vertices[1].clone();
    var v2 = mesh.geometry.vertices[2].clone();
    var v3 = v1.clone();
    var v4 = v2.clone();
    var dir = new THREE.Vector3();
    var origDir = new THREE.Vector3();
    origDir.subVectors(v1,v2);
    dir.subVectors(v1,v2);
    var dist = v1.distanceTo(v2);
    
    var mid = getMid(v1,v2);
    //var dir2 = dir.clone();
    //dir2.x = dir2.x/2;
    //mid.add(dir2);
    var thick = 6;
    dir.applyAxisAngle(new THREE.Vector3(0, 0, 1), THREE.Math.degToRad(-90));
    dir.normalize();
    dir.setLength(thick);
    v3.add(dir);	// other point
    v4.add(dir);	// other point
    
    // convert...