GUI: Replaced the 4 views with just a single perspective view.

gui/index.html

@@ -38,7 +38,7 @@
 		<script type="text/javascript" src="js/libs/signals.min.js"></script>
 
 		<script type="text/javascript" src="js/UI.js"></script>
-		<script type="text/javascript" src="js/UI.Viewports.js"></script>
+		<script type="text/javascript" src="js/UI.Viewport.js"></script>
 		<script type="text/javascript" src="js/UI.Toolbar.js"></script>
 		<script type="text/javascript" src="js/Code.js"></script>
 		<script type="text/javascript" src="js/Code.Templates.js"></script>
@@ -69,8 +69,6 @@
 			xr.style.position = 'absolute';
 			xr.style.top = '0px';
 			xr.style.width = '1px';
-			xr.style.borderLeft = '1px solid #e0e0e0';
-			// xr.style.backgroundColor = '#ffffff';
 			xr.style.cursor = 'col-resize';
 			xr.addEventListener( 'mousedown', function ( event ) {
 
@@ -201,12 +199,12 @@
 
 			function update() {
 
-				ui.setSize( window.innerWidth * xhalf, window.innerHeight );
+				ui.setSize( Math.floor( window.innerWidth * xhalf ), window.innerHeight );
 
-				code.setPosition( window.innerWidth * xhalf, 0 );
-				code.setSize( window.innerWidth - ( window.innerWidth * xhalf ), window.innerHeight );
+				code.setPosition( Math.floor( window.innerWidth * xhalf ), 0 );
+				code.setSize( window.innerWidth - Math.floor( window.innerWidth * xhalf ), window.innerHeight );
 
-				xr.style.left = ( window.innerWidth * xhalf )  + 'px';
+				xr.style.left = Math.floor( window.innerWidth * xhalf )  + 'px';
 				xr.style.height = window.innerHeight + 'px';
 
 			}

gui/js/UI.Viewport.js

@@ -0,0 +1,187 @@
+UI.Viewport = function () {
+
+	var _width, _height;
+
+	var _HOVERED, _SELECTED;
+	var _offset = new THREE.Vector3();
+
+	//
+
+	var _domElement = document.createElement( 'div' );
+	_domElement.style.position = 'absolute';
+	_domElement.style.backgroundColor = '#808080';
+
+	//
+
+	var _camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
+	_camera.position.x = 500;
+	_camera.position.y = 250;
+	_camera.position.z = 500;
+
+	// guides
+
+	var _sceneHelpers = new THREE.Scene();
+
+	var _grid = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 20, 20 ), new THREE.MeshBasicMaterial( { color: 0x606060, wireframe: true, transparent: true } ) );
+	_grid.rotation.x = Math.PI / 2;
+	_sceneHelpers.add( _grid );
+
+	//
+
+	var _scene = new THREE.Scene();
+
+	/*
+	var light = new THREE.AmbientLight( 0x404040 );
+	_scene.add( light );
+
+	var light = new THREE.DirectionalLight( 0xffffff );
+	light.position.set( 1000, 1000, - 1000 );
+	light.position.normalize();
+	_scene.add( light );
+	*/
+
+	var _plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
+	_plane.visible = false;
+	_sceneHelpers.add( _plane );
+
+	var _projector = new THREE.Projector();
+
+	var _renderer = new THREE.WebGLRenderer( /*{ antialias: true }*/ );
+	_renderer.autoClear = false;
+	_renderer.domElement.addEventListener( 'mousedown', function ( event ) {
+
+		event.preventDefault();
+
+		var vector = new THREE.Vector3( ( event.clientX / _width ) * 2 - 1, - ( event.clientY / _height ) * 2 + 1, 0.5 );
+		_projector.unprojectVector( vector, _camera );
+
+		var ray = new THREE.Ray( _camera.position, vector.subSelf( _camera.position ).normalize() );
+		var intersects = ray.intersectScene( _scene );
+
+		if ( intersects.length ) {
+
+			_SELECTED = intersects[ 0 ].object;
+
+			var intersects = ray.intersectObject( _plane );
+			_offset.copy( intersects[ 0 ].point ).subSelf( _plane.position );
+
+		}
+
+	}, false );
+	_renderer.domElement.addEventListener( 'mousemove', function ( event ) {
+
+		event.preventDefault();
+
+		var vector = new THREE.Vector3( ( event.clientX / _width ) * 2 - 1, - ( event.clientY / _height ) * 2 + 1, 0.5 );
+		_projector.unprojectVector( vector, _camera );
+
+		var ray = new THREE.Ray( _camera.position, vector.subSelf( _camera.position ).normalize() );
+		var intersects = ray.intersectScene( _scene );
+
+		if ( _SELECTED ) {
+
+			var intersects = ray.intersectObject( _plane );
+			_SELECTED.position.copy( intersects[ 0 ].point.subSelf( _offset ) );
+
+			_render();
+
+			signals.updated.dispatch( _scene );
+
+			return;
+
+		}
+
+		if ( intersects.length ) {
+
+			_HOVERED = intersects[ 0 ].object;
+
+			_plane.position.set( 0, 0, 0 );
+			_plane.lookAt( _camera.position );
+			_plane.position.copy( _HOVERED.position );
+
+			_render();
+
+		} else {
+
+			_HOVERED = null;
+
+		}
+
+	}, false );
+	_renderer.domElement.addEventListener( 'mouseup', function ( event ) {
+
+		event.preventDefault();
+
+		if ( _SELECTED ) {
+
+			_plane.position.copy( _SELECTED.position );
+			_SELECTED = null;
+
+		}
+
+	}, false );
+	_renderer.domElement.addEventListener( 'mousewheel', function ( event ) {
+
+		if ( event.wheelDeltaY ) {
+
+			event.preventDefault();
+
+			var vector = _camera.position.clone();
+			var amount = event.wheelDeltaY * 0.2;
+
+			if ( vector.length() - amount < 10 ) return;
+
+			vector.normalize().multiplyScalar( amount );
+			_camera.position.subSelf( vector );
+
+			_render();
+
+		}
+
+	}, false );
+	_domElement.appendChild( _renderer.domElement );
+
+	// signals
+
+	signals.added.add( function ( object ) {
+
+		_scene.add( object );
+		_render();
+
+		signals.updated.dispatch( _scene );
+
+	} );
+
+	//
+
+	this.getDOMElement = function () {
+
+		return _domElement;
+
+	};
+
+	this.setSize = function ( width, height ) {
+
+		_width = width;
+		_height = height;
+
+		_camera.aspect = width / height;
+		_camera.updateProjectionMatrix();
+
+		_renderer.setSize( width, height );
+
+		_render();
+
+	};
+
+	var _render = function () {
+
+		_camera.lookAt( _scene.position );
+
+		_renderer.clear();
+		_renderer.render( _sceneHelpers, _camera );
+		_renderer.render( _scene, _camera );
+
+	};
+
+}

gui/js/UI.Viewports.js

@@ -1,454 +0,0 @@
-UI.Viewports = function () {
-
-	var _width, _height;
-	var _xhalf = 0.5, _yhalf = 0.5;
-
-	var _HOVERED, _SELECTED;
-	var _offset = new THREE.Vector3();
-
-	//
-
-	var _domElement = document.createElement( 'div' );
-	_domElement.style.position = 'absolute';
-	_domElement.style.backgroundColor = '#808080';
-
-	//
-
-	var _views = [
-		{ x: null, y: null, width: null, height: null, camera: null },
-		{ x: null, y: null, width: null, height: null, camera: null },
-		{ x: null, y: null, width: null, height: null, camera: null },
-		{ x: null, y: null, width: null, height: null, camera: null }
-	];
-
-
-	//_views[ 0 ].camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 ); // front
-	_views[ 0 ].camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, - 2000, 2000 ); // front
-	_views[ 0 ].camera.position.z = 1000;
-
-	//_views[ 2 ].camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 ); // top
-	_views[ 2 ].camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, - 2000, 2000 ); // top
-	_views[ 2 ].camera.position.y = 1000;
-	_views[ 2 ].camera.rotation.x = - Math.PI / 2;
-
- 	//_views[ 3 ].camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 ); // left
-	_views[ 1 ].camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, - 2000, 2000 ); // left
-	_views[ 1 ].camera.position.x = - 1000;
-	_views[ 1 ].camera.rotation.y = -Math.PI / 2;
-	
-	// var toLeft = function() {
-	// 	this.rotation.x = 0;
-	// 	this.rotation.y = - Math.PI / 2;
-	// 	this.rotation.z = 0;
-	// }
-	// 
-	// var toRight = function() {
-	// 	this.rotation.x = 0;
-	// 	this.rotation.y = Math.PI / 2;
-	// 	this.rotation.z = 0;
-	// }
-	// 
-	// var toTop = function() {
-	// 	this.rotation.x = - Math.PI / 2;
-	// 	this.rotation.y = 0;
-	// 	this.rotation.z = 0;
-	// }
-
-	_views[ 3 ].camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 ); // perspective
-	_views[ 3 ].camera.position.x = 1000;
-	_views[ 3 ].camera.position.y = 1000;
-	_views[ 3 ].camera.position.z = 1000;
-
-	// guides
-
-	var _sceneHelpers = new THREE.Scene();
-
-	var _grid = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 20, 20 ), new THREE.MeshBasicMaterial( { color: 0x606060, wireframe: true, transparent: true } ) );
-	_grid.rotation.x = Math.PI / 2;
-	_sceneHelpers.add( _grid );
-
-	//
-
-	var _scene = new THREE.Scene();
-
-	/*
-	var light = new THREE.AmbientLight( 0x404040 );
-	_scene.add( light );
-
-	var light = new THREE.DirectionalLight( 0xffffff );
-	light.position.set( 1000, 1000, - 1000 );
-	light.position.normalize();
-	_scene.add( light );
-	*/
-
-	var _plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
-	_plane.visible = false;
-	_sceneHelpers.add( _plane );
-
-	var _projector = new THREE.Projector();
-
-	var _renderer = new THREE.WebGLRenderer( /*{ antialias: true }*/ );
-	_renderer.autoClear = false;
-	_renderer.domElement.addEventListener( 'mousedown', function ( event ) {
-
-		event.preventDefault();
-
-		var mouse = getViewportMouse( event.clientX, event.clientY );
-
-		var camera = _views[ mouse.view ].camera;
-		var vector = new THREE.Vector3( mouse.x * 2 - 1, - mouse.y * 2 + 1, 0.5 );
-		_projector.unprojectVector( vector, camera );
-
-		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
-		var intersects = ray.intersectScene( _scene );
-
-		if ( intersects.length ) {
-
-			_SELECTED = intersects[ 0 ].object;
-
-			var intersects = ray.intersectObject( _plane );
-			_offset.copy( intersects[ 0 ].point ).subSelf( _plane.position );
-
-		}
-
-	}, false );
-	_renderer.domElement.addEventListener( 'mousemove', function ( event ) {
-
-		event.preventDefault();
-
-		var mouse = getViewportMouse( event.clientX, event.clientY );
-
-		var camera = _views[ mouse.view ].camera;
-		var vector = new THREE.Vector3( mouse.x * 2 - 1, - mouse.y * 2 + 1, 0.5 );
-		_projector.unprojectVector( vector, camera );
-
-		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
-		var intersects = ray.intersectScene( _scene );
-
-		if ( _SELECTED ) {
-
-			var intersects = ray.intersectObject( _plane );
-			_SELECTED.position.copy( intersects[ 0 ].point.subSelf( _offset ) );
-
-			_render();
-
-			signals.updated.dispatch( _scene );
-
-			return;
-
-		}
-
-		if ( intersects.length ) {
-
-			_HOVERED = intersects[ 0 ].object;
-
-			_plane.position.set( 0, 0, 0 );
-			_plane.lookAt( camera.position );
-			_plane.position.copy( _HOVERED.position );
-
-			_render();
-
-		} else {
-
-			_HOVERED = null;
-
-		}
-
-	}, false );
-	_renderer.domElement.addEventListener( 'mouseup', function ( event ) {
-
-		event.preventDefault();
-
-		if ( _SELECTED ) {
-
-			_plane.position.copy( _SELECTED.position );
-			_SELECTED = null;
-
-		}
-
-	}, false );
-	_renderer.domElement.addEventListener( 'mousewheel', function ( event ) {
-
-		if ( event.wheelDeltaY ) {
-
-			event.preventDefault();
-
-			var mouse = getViewportMouse( event.clientX, event.clientY );
-			var camera = _views[ mouse.view ].camera;
-			var vector = camera.position.clone();
-			var amount = event.wheelDeltaY * 0.2;
-
-			if ( vector.length() - amount < 10 ) return;
-
-			vector.normalize().multiplyScalar( amount );
-			camera.position.subSelf( vector );
-
-			_render();
-
-		}
-
-	}, false );
-	_domElement.appendChild( _renderer.domElement );
-
-	//
-
-	var _xr = document.createElement( 'div' );
-	_xr.style.position = 'absolute';
-	_xr.style.top = '0px';
-	_xr.style.width = '1px';
-	_xr.style.borderLeft = '1px solid #808080';
-	_xr.style.borderRight = '1px solid #808080';
-	_xr.style.backgroundColor = '#404040';
-	_xr.style.cursor = 'col-resize';
-	_xr.addEventListener( 'mousedown', function ( event ) {
-
-		event.preventDefault();
-
-		document.body.style.cursor = 'col-resize';
-		document.addEventListener( 'mousemove', onMouseMove, false );
-		document.addEventListener( 'mouseup', onMouseUp, false );
-
-		function onMouseMove( event ) {
-
-			event.preventDefault();
-
-			_xhalf = Math.max( 0, Math.min( 1, event.clientX / _width ) );
-
-			_updateViews();
-			_updateCameras();
-			_render();
-
-		}
-
-		function onMouseUp( event ) {
-
-			document.body.style.cursor = 'auto';
-			document.removeEventListener( 'mousemove', onMouseMove, false );
-			document.removeEventListener( 'mouseup', onMouseUp, false );
-
-		}
-
-	}, false );
-	_xr.addEventListener( 'dblclick', function ( event ) {
-
-		_xhalf = 0.5;
-
-		_updateViews();
-		_updateCameras();
-		_render();
-
-	}, false );
-	_domElement.appendChild( _xr );
-
-	var _yr = document.createElement( 'div' );
-	_yr.style.position = 'absolute';
-	_yr.style.height = '1px';
-	_yr.style.borderTop = '1px solid #808080';
-	_yr.style.borderBottom = '1px solid #808080';
-	_yr.style.backgroundColor = '#404040';
-	_yr.style.cursor = 'row-resize';
-	_yr.addEventListener( 'mousedown', function ( event ) {
-
-		event.preventDefault();
-
-		document.body.style.cursor = 'row-resize';
-		document.addEventListener( 'mousemove', onMouseMove, false );
-		document.addEventListener( 'mouseup', onMouseUp, false );
-
-		function onMouseMove( event ) {
-
-			event.preventDefault();
-
-			_yhalf = Math.max( 0, Math.min( 1, event.clientY / _height ) );
-
-			_updateViews();
-			_updateCameras();
-			_render();
-
-		}
-
-		function onMouseUp( event ) {
-
-			document.body.style.cursor = 'auto';
-			document.removeEventListener( 'mousemove', onMouseMove, false );
-			document.removeEventListener( 'mouseup', onMouseUp, false );
-
-		}
-
-	}, false );
-	_yr.addEventListener( 'dblclick', function ( event ) {
-
-		_yhalf = 0.5;
-
-		_updateViews();
-		_updateCameras();
-		_render();
-
-	}, false );
-	_domElement.appendChild( _yr );
-
-	function getViewportMouse( x, y ) {
-
-		var width = _views[ 0 ].width;
-		var height = _views[ 0 ].height;
-
-		if ( x < width && y < height ) {
-
-			return {
-
-				view: 0,
-				x: x / _views[ 0 ].width,
-				y: y / _views[ 0 ].height
-
-			};
-
-		} else if ( x > width && y < height ) {
-
-			return {
-
-				view: 1,
-				x: ( x - _views[ 1 ].x ) / _views[ 1 ].width,
-				y: y / _views[ 1 ].height
-
-			};
-
-		} else if ( x < width && y > height ) {
-
-			return {
-
-				view: 2,
-				x: x / _views[ 2 ].width,
-				y: ( y - _views[ 2 ].y ) / _views[ 2 ].height
-
-			};
-
-		} else if ( x > width && y > height ) {
-
-			return {
-
-				view: 3,
-				x: ( x - _views[ 3 ].x ) / _views[ 3 ].width,
-				y: ( y - _views[ 3 ].y ) / _views[ 3 ].height
-
-			};
-
-		}
-
-	}
-
-	// signals
-
-	signals.added.add( function ( object ) {
-
-		_scene.add( object );
-		_render();
-
-		signals.updated.dispatch( _scene );
-
-	} );
-
-	//
-
-	this.getDOMElement = function () {
-
-		return _domElement;
-
-	};
-
-	this.setSize = function ( width, height ) {
-
-		_width = width;
-		_height = height;
-
-		_updateViews();
-		_updateCameras();
-
-		_renderer.setSize( _width, _height );
-
-		_render();
-
-	};
-
-	var _updateViews = function () {
-
-		_views[ 0 ].x = 0;
-		_views[ 0 ].y = 0;
-		_views[ 0 ].width = _width * _xhalf;
-		_views[ 0 ].height = _height * _yhalf;
-
-		_views[ 1 ].x = _width * _xhalf;
-		_views[ 1 ].y = 0;
-		_views[ 1 ].width = _width - _width * _xhalf;
-		_views[ 1 ].height = _height * _yhalf;
-
-		_views[ 2 ].x = 0;
-		_views[ 2 ].y = _height * _yhalf;
-		_views[ 2 ].width = _width * _xhalf;
-		_views[ 2 ].height = _height - _height * _yhalf;
-
-		_views[ 3 ].x = _width * _xhalf;
-		_views[ 3 ].y = _height * _yhalf;
-		_views[ 3 ].width = _width - _width * _xhalf;
-		_views[ 3 ].height = _height - _height * _yhalf;
-
-	};
-
-	var _updateCameras = function () {
-
-		_views[ 0 ].camera.left = _views[ 0 ].width / - 2;
-		_views[ 0 ].camera.right = _views[ 0 ].width / 2;
-		_views[ 0 ].camera.top = _views[ 0 ].height / 2;
-		_views[ 0 ].camera.bottom = _views[ 0 ].height / - 2;
-		_views[ 0 ].camera.updateProjectionMatrix();
-
-		_views[ 1 ].camera.left = _views[ 1 ].width / - 2;
-		_views[ 1 ].camera.right = _views[ 1 ].width / 2;
-		_views[ 1 ].camera.top = _views[ 1 ].height / 2;
-		_views[ 1 ].camera.bottom = _views[ 1 ].height / - 2;
-		_views[ 1 ].camera.updateProjectionMatrix();
-
-		_views[ 2 ].camera.left = _views[ 2 ].width / - 2;
-		_views[ 2 ].camera.right = _views[ 2 ].width / 2;
-		_views[ 2 ].camera.top = _views[ 2 ].height / 2;
-		_views[ 2 ].camera.bottom = _views[ 2 ].height / - 2;
-		_views[ 2 ].camera.updateProjectionMatrix();
-
-		_views[ 3 ].camera.aspect = _views[ 3 ].width / _views[ 3 ].height;
-		_views[ 3 ].camera.updateProjectionMatrix();
-
-
-	};
-
-	var _render = function () {
-
-		_xr.style.left = ( _width * _xhalf ) + 'px';
-		_xr.style.height = _height + 'px';
-
-		_yr.style.top = ( _height * _yhalf ) + 'px';
-		_yr.style.width = _width + 'px';
-
-		//
-
-		_views[ 3 ].camera.lookAt( _scene.position );
-
-		_renderer.clear();
-
-		_renderer.setViewport( 0, _height - _height * _yhalf, _views[ 0 ].width, _views[ 0 ].height );
-		_renderer.render( _sceneHelpers, _views[ 0 ].camera );
-		_renderer.render( _scene, _views[ 0 ].camera );
-
-		_renderer.setViewport( _width * _xhalf, _height - _height * _yhalf, _views[ 1 ].width, _views[ 1 ].height );
-		_renderer.render( _sceneHelpers, _views[ 1 ].camera );
-		_renderer.render( _scene, _views[ 1 ].camera );
-
-		_renderer.setViewport( 0, 0, _views[ 2 ].width, _views[ 2 ].height );
-		_renderer.render( _sceneHelpers, _views[ 2 ].camera );
-		_renderer.render( _scene, _views[ 2 ].camera );
-
-		_renderer.setViewport( _width * _xhalf, 0, _views[ 3 ].width, _views[ 3 ].height );
-		_renderer.render( _sceneHelpers, _views[ 3 ].camera );
-		_renderer.render( _scene, _views[ 3 ].camera );
-
-	};
-
-}

gui/js/UI.js

@@ -3,8 +3,8 @@ var UI = function () {
 	var _domElement = document.createElement( 'div' );
 	_domElement.style.position = 'absolute';
 
-	var _viewports = new UI.Viewports();
-	_domElement.appendChild( _viewports.getDOMElement() );
+	var _viewport = new UI.Viewport();
+	_domElement.appendChild( _viewport.getDOMElement() );
 
 	var _toolbar = new UI.Toolbar();
 	_domElement.appendChild( _toolbar.getDOMElement() );
@@ -20,7 +20,7 @@ var UI = function () {
 		_domElement.style.width = width + 'px';
 		_domElement.style.height = height + 'px';
 
-		_viewports.setSize( width, height - 50 );
+		_viewport.setSize( width, height - 50 );
 
 		_toolbar.setPosition( 0, height - 50 );
 		_toolbar.setSize( width, 50 );