SOURCE

let cameraPersp, cameraOrtho, currentCamera;
let scene, renderer, control, orbit;


init();
render();


function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const aspect = window.innerWidth / window.innerHeight;

    cameraPersp = new THREE.PerspectiveCamera(50, aspect, 0.01, 30000);
    cameraOrtho = new THREE.OrthographicCamera(- 600 * aspect, 600 * aspect, 600, - 600, 0.01, 30000);
    currentCamera = cameraPersp;

    currentCamera.position.set(100, 500, 1000);
    currentCamera.lookAt(0, 200, 0);

    scene = new THREE.Scene();
    scene.add(new THREE.GridHelper(1000, 10, 0x888888, 0x444444));


    orbit = new THREE.OrbitControls(currentCamera, renderer.domElement);
    orbit.update();
    orbit.addEventListener('change', render);

    control = new THREE.TransformControls(currentCamera, renderer.domElement);
    control.addEventListener('change', render);

    control.addEventListener('dragging-changed', function (event) {

        orbit.enabled = !event.value;

    });

    // const mesh = new THREE.Mesh(geometry, material);
    // scene.add(mesh);
    // control.attach(mesh);


    var h = 50;

    var body = [
        //top
        -h, h, h, h, h, h,
        h, h, h, h, -h, h,
        h, -h, h, -h, -h, h,
        -h, -h, h, -h, h, h,

        //botom
        -h, h, -h, h, h, -h,
        h, h, -h, h, -h, -h,
        h, -h, -h, -h, -h, -h,
        -h, -h, -h, -h, h, -h,

        // vertical lines
        -h, h, h, -h, h, -h,
        h, h, h, h, h, -h,
        h, -h, h, h, -h, -h,
        -h, -h, h, -h, -h, -h,

        //direction
        h, 0, h, 3 * h, 0, h,
        //h/2, -h, h+0.1,  h, 0, h+0.1,
        //h/2,  h, h+0.1,  h, 0, h+0.1,

        //side direction
        // h, h/2, h,  h, h, 0,
        // h, h/2, -h,  h, h, 0,
        // h, 0, 0,  h, h, 0,


    ];


    body = body.map(n => n + 20)

    var bbox = new THREE.BufferGeometry();
    bbox.setAttribute('position', new THREE.Float32BufferAttribute(body, 3));


    var boxMaterial = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 1});
    var box = new THREE.LineSegments(bbox, boxMaterial);

    box.scale.x = 1;
    box.scale.y = 1;
    box.scale.z = 1;

    scene.add(box)
    control.attach(box);

    scene.add(control);

    window.addEventListener('resize', onWindowResize);

    window.addEventListener('keydown', function (event) {

        switch (event.keyCode) {

            case 81: // Q
                control.setSpace(control.space === 'local' ? 'world' : 'local');
                break;

            case 16: // Shift
                control.setTranslationSnap(100);
                control.setRotationSnap(THREE.MathUtils.degToRad(15));
                control.setScaleSnap(0.25);
                break;

            case 87: // W
                control.setMode('translate');
                break;

            case 69: // E
                control.setMode('rotate');
                break;

            case 82: // R
                control.setMode('scale');
                break;

            case 67: // C
                const position = currentCamera.position.clone();

                currentCamera = currentCamera.isPerspectiveCamera ? cameraOrtho : cameraPersp;
                currentCamera.position.copy(position);

                orbit.object = currentCamera;
                control.camera = currentCamera;

                currentCamera.lookAt(orbit.target.x, orbit.target.y, orbit.target.z);
                onWindowResize();
                break;

            case 86: // V
                const randomFoV = Math.random() + 0.1;
                const randomZoom = Math.random() + 0.1;

                cameraPersp.fov = randomFoV * 160;
                cameraOrtho.bottom = - randomFoV * 500;
                cameraOrtho.top = randomFoV * 500;

                cameraPersp.zoom = randomZoom * 5;
                cameraOrtho.zoom = randomZoom * 5;
                onWindowResize();
                break;

            case 187:
            case 107: // +, =, num+
                control.setSize(control.size + 0.1);
                break;

            case 189:
            case 109: // -, _, num-
                control.setSize(Math.max(control.size - 0.1, 0.1));
                break;

            case 88: // X
                control.showX = !control.showX;
                break;

            case 89: // Y
                control.showY = !control.showY;
                break;

            case 90: // Z
                control.showZ = !control.showZ;
                break;

            case 32: // Spacebar
                control.enabled = !control.enabled;
                break;

            case 27: // Esc
                control.reset();
                break;

        }

    });

    window.addEventListener('keyup', function (event) {

        switch (event.keyCode) {

            case 16: // Shift
                control.setTranslationSnap(null);
                control.setRotationSnap(null);
                control.setScaleSnap(null);
                break;

        }

    });

}

function onWindowResize() {

    const aspect = window.innerWidth / window.innerHeight;

    cameraPersp.aspect = aspect;
    cameraPersp.updateProjectionMatrix();

    cameraOrtho.left = cameraOrtho.bottom * aspect;
    cameraOrtho.right = cameraOrtho.top * aspect;
    cameraOrtho.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

    render();

}

function render() {

    renderer.render(scene, currentCamera);

}

<div id="info">
	"W" 位移 | "E" 旋转 | "R" 缩放
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/controls/OrbitControls.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/controls/TransformControls.js">
</script>

body {
	  margin: 0;
}
canvas {
	display: block;
}

#info {
  position: absolute;
  padding: 12px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}