Resizable/editable cube

by Atrahasis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script>
    /**
 * @author Eberhard Graether / http://egraether.com/
 * @author Mark Lundin 	/ http://mark-lundin.com
 * @author Simone Manini / http://daron1337.github.io
 * @author Luca Antiga 	/ http://lantiga.github.io
 */

THREE.TrackballControls = function ( object, domElement ) {

	var _this = this;
	var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };

	this.object = object;
	this.domElement = ( domElement !== undefined ) ? domElement : document;

	// API

	this.enabled = true;

	this.screen = { left: 0, top: 0, width: 0, height: 0 };

	this.rotateSpeed = 1.0;
	this.zoomSpeed = 1.2;
	this.panSpeed = 0.3;

	this.noRotate = false;
	this.noZoom = false;
	this.noPan = false;

	this.staticMoving = false;
	this.dynamicDampingFactor = 0.2;

	this.minDistance = 0;
	this.maxDistance = Infinity;

	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

	// internals

	this.target = new THREE.Vector3();

	var EPS = 0.000001;

	var lastPosition = new THREE.Vector3();

	var _state = STATE.NONE,
	_prevState = STATE.NONE,

	_eye = new THREE.Vector3(),

	_movePrev = new THREE.Vector2(),
	_moveCurr = new THREE.Vector2(),

	_lastAxis = new THREE.Vector3(),
	_lastAngle = 0,

	_zoomStart = new THREE.Vector2(),
	_zoomEnd = new THREE.Vector2(),

	_touchZoomDistanceStart = 0,
	_touchZoomDistanceEnd = 0,

	_panStart = new THREE.Vector2(),
	_panEnd = new THREE.Vector2();

	// for reset

	this.target0 = this.target.clone();
	this.position0 = this.object.position.clone();
	this.up0 = this.object.up.clone();

	// events

	var changeEvent = { type: 'change' };
	var startEvent = { type: 'start' };
	var endEvent = { type: 'end' };


	// methods

	this.handleResize = function () {

		if ( this.domElement === document ) {

			this.screen.left = 0;
			this.screen.top = 0;
			this.screen.width = window.innerWidth;
			this.screen.height = window.innerHeight;

		} else {

			var...

CSS

body{
    padding:0;
    margin:0;
    text-align:center;
}

JavaScript

var renderer, scene, camera, controls ;

init();

function init(){
    
    /*SETTINGS*/
    
    renderer=new THREE.WebGLRenderer({alpha:true});
    renderer.setClearColor(0xaaaaaa);
    renderer.setSize(innerWidth,innerHeight);
    document.body.appendChild(renderer.domElement);
    
    scene=new THREE.Scene();
    
    camera=new THREE.PerspectiveCamera(70,innerWidth/innerHeight,1,40);
    camera.position.set(2,2,6);
    
    controls=new THREE.TrackballControls(camera,renderer.domElement);
    controls.rotateSpeed=5;
    
    
    /*OBJECTS*/
    
    createGrid(); 
    var light=new THREE.SpotLight(0xffffff,10,20);
    light.position.set(-10,10,10);
    scene.add(light);
    
    
    //1.Create a mesh
    var object=new THREE.Mesh(
        new THREE.BoxGeometry(2,2,2),
        new THREE.MeshLambertMaterial({color:0x00aa00,transparent:true,shading:THREE.NoShading})
        );
    
    //2.create vertexHelpers
    var sphere=new THREE.Mesh(
        new THREE.SphereGeometry(.1,.1,.1,8,8),
        new THREE.MeshBasicMaterial({color:0x000000})
        );
    var vertexHelpers=[];
    for(var i=0;i<object.geometry.vertices.length;i++){
        var vertexHelper=sphere.clone();
        var vertexPosition=object.geometry.vertices[i];
        vertexHelper.position.copy(vertexPosition);
        vertexHelper.visible=false;
        vertexHelper.data={index:i};
        scene.add(vertexHelper);
        vertexHelpers.push(vertexHelper);
    }
    
    //3. create an (invisible) plane to drag the vertices on
    var plane=new THREE.Mesh(
        new THREE.PlaneBufferGeometry(8,8,8,1,1,1),
        new THREE.MeshBasicMaterial({color:0x000000,transparent:true,opacity:.1,depthWrite:false,side:THREE.DoubleSide})
        );
    //plane.visible=false;
    
    scene.add(object,plane);
    
    
    /*GEOMETRY EDITION*/
    
    var raycaster=new THREE.Raycaster();
    var mouse=new THREE.Vector2();
    var INTERSECTED,SELECTED;
    
    //custom features
    var mouseDown=false;
...