首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Reworking GUI. WIP.

Mr.doob 13 年之前
父节点
0832354cd4
当前提交
5e49f0dded
共有 11 个文件被更改，包括 529 次插入 和 884 次删除
分列视图 显示文件统计
  1. 二进制
      gui/files/inconsolata.woff
  2. 28 170
      gui/index.html
  3. 0 136
      gui/js/Code.Templates.js
  4. 0 226
      gui/js/Code.js
  5. 0 72
      gui/js/UI.Toolbar.js
  6. 0 257
      gui/js/UI.Viewport.js
  7. 359 15
      gui/js/UI.js
  8. 0 7
      gui/js/libs/signals.min.js
  9. 70 0
      gui/js/ui/Panel.js
  10. 71 0
      gui/js/ui/Viewport.js
  11. 1 1
      src/objects/Mesh.js

二进制
gui/files/inconsolata.woff
查看文件


+ 28 - 170
gui/index.html
查看文件 

@@ -1,34 +1,20 @@
 
-<html>
 
+<!DOCTYPE html>
 
+<html lang="en">
 
 	<head>
 
 		<title>three.js gui</title>
 
 		<style>
 
-			@font-face {
 
-
 
-				font-family: 'Inconsolata';
 
-				src: url('files/inconsolata.woff') format('woff');
 
-				font-weight: normal;
 
-				font-style: normal;
 
-
 
-			}
 
-
 
 			body {
 
-
 
+				font-family: Arial, sans-serif;
 
+				font-size: 14px;
 
 				margin: 0;
 
 				overflow: hidden;
 
-
 
 			}
 
 
-			button {
 
-
 
-				cursor: pointer;
 
-
 
+			hr {
 
+				border: 0px;
 
+				border-top: 1px solid #ccc;
 
 			}
 
 
-			pre {
 
-
 
-				font-family: 'Inconsolata';
 
-
 
-			}
 
 		</style>
 
 	</head>
 
 	<body>
 
@@ -38,171 +24,43 @@
 
 		<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.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>
 
+		<script type="text/javascript" src="js/ui/Viewport.js"></script>
 
+		<script type="text/javascript" src="js/ui/Panel.js"></script>
 
 
 		<script>
 
 
-			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 
-			window.URL = window.URL || window.webkitURL || window.mozURL;
 
-
 
-			var Signal = signals.Signal;
 
-
 
-			var signals = {
 
+			var events = {
 
 
-				added: new Signal(),
 
-				updated: new Signal()
 
+				windowResize: new signals.Signal()
 
 
 			};
 
 
-			var ui = new UI();
 
-			document.body.appendChild( ui.getDOMElement() );
 
-
 
-			var code = new Code()
 
-			document.body.appendChild( code.getDOMElement() );
 
-
 
-			var xhalf = 0.7;
 
-
 
-			var xr = document.createElement( 'div' );
 
-			xr.style.position = 'absolute';
 
-			xr.style.top = '0px';
 
-			xr.style.width = '1px';
 
-			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 / window.innerWidth ) );
 
-
 
-					update();
 
-
 
-				}
 
-
 
-				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.7;
 
-				update();
 
-
 
-			}, false );
 
-			document.body.appendChild( xr );
 
-
 
 			//
 
 
-			document.addEventListener( 'dragover', function ( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-			}, false );
 
-			document.addEventListener( 'dragleave', function ( event ) {
 
-
 
-				event.preventDefault();
 
+			var viewport = new Viewport( events );
 
+			viewport.setWidth( '-webkit-calc(100% - 300px)' );
 
+			viewport.setWidth( '-moz-calc(100% - 300px)' );
 
+			viewport.setWidth( 'calc(100% - 300px)' );
 
+			viewport.setHeight( '100%' );
 
+			document.body.appendChild( viewport.dom );
 
 
-			}, false );
 
-			document.addEventListener( 'drop', function ( event ) {
 
+			var panel = new Panel( events );
 
+			panel.setX( '-webkit-calc(100% - 300px)' );
 
+			panel.setX( '-moz-calc(100% - 300px)' );
 
+			panel.setX( 'calc(100% - 300px)' );
 
+			document.body.appendChild( panel.dom );
 
 
-				event.preventDefault();
 
+			//			
 
-				var file = event.dataTransfer.files[ 0 ];
 
-				var extension = file.name.split( '.' )[1].toLowerCase();
 
-				var reader = new FileReader();
 
+			var onWindowResize = function ( event ) {
 
 
-				reader.onload = function ( event ) {
 
+				events.windowResize.dispatch();
 
 
-					var contents = event.target.result;
 
-
 
-					switch ( extension ) {
 
-
 
-						case 'js':
 
-
 
-							var loader = new THREE.JSONLoader();
 
-							loader.createModel( JSON.parse( contents ), function ( geometry ) {
 
-
 
-								geometry.gui = {
 
-									paremeters: {
 
-									},
 
-									getCode: function () {
 
-
 
-										return 'new THREE.JSONLoader( TODO )';
 
-
 
-									}
 
-								};
 
-
 
-								var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-								var mesh = new THREE.Mesh( geometry, material );
 
-
 
-								signals.added.dispatch( mesh );
 
-
 
-							} );
 
-
 
-							break;
 
-
 
-						case 'dae':
 
-
 
-							var parser = new DOMParser();
 
-							var xml = parser.parseFromString( contents, 'text/xml' );
 
-
 
-							var loader = new THREE.ColladaLoader();
 
-							loader.parse( xml, function ( collada ) {
 
-
 
-								signals.added.dispatch( collada.scene );
 
-
 
-							} );
 
-
 
-							break;
 
-
 
-
 
-
 
-					}
 
-
 
-				};
 
-
 
-				reader.readAsText( file );
 
-
 
-			}, false );
 
-
 
-			// Add Sphere
 
-
 
-			var geometry = new THREE.SphereGeometry( 75, 20, 10 );
 
-			var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-			var mesh = new THREE.Mesh( geometry, material );
 
-
 
-			signals.added.dispatch( mesh );
 
-
 
-			//
 
-
 
-			update();
 
-			window.addEventListener( 'resize', function ( event ) { update() }, false );
 
-
 
-			function update() {
 
-
 
-				ui.setSize( Math.floor( 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 = Math.floor( window.innerWidth * xhalf )  + 'px';
 
-				xr.style.height = window.innerHeight + 'px';
 
+			onWindowResize();
 
 
-			}
 
+			window.addEventListener( 'resize', onWindowResize, false );
 
 
 		</script>
 
 	</body>

+ 0 - 136
gui/js/Code.Templates.js
查看文件 

@@ -1,136 +0,0 @@
 
-// CubeGeometry
 
-
 
-THREE._CubeGeometry = THREE.CubeGeometry;
 
-THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, flipped, sides ) {
 
-
 
-	var geometry = new THREE._CubeGeometry( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, flipped, sides );
 
-
 
-	geometry.gui = {
 
-
 
-		parameters: {
 
-
 
-			width: width,
 
-			height: height,
 
-			depth: depth,
 
-			segmentsWidth: segmentsWidth,
 
-			segmentsHeight: segmentsHeight,
 
-			segmentsDepth: segmentsDepth,
 
-			materials: materials,
 
-			flipped: flipped,
 
-			sides: sides
 
-
 
-		},
 
-
 
-		getCode: function () {
 
-
 
-			return 'new THREE.CubeGeometry( ' + [
 
-
 
-					geometry.gui.parameters.width,
 
-					geometry.gui.parameters.height,
 
-					geometry.gui.parameters.depth,
 
-					geometry.gui.parameters.segmentsWidth,
 
-					geometry.gui.parameters.segmentsHeight,
 
-					geometry.gui.parameters.segmentsDepth
 
-					// ,
 
-					// geometry.gui.parameters.materials,
 
-					// geometry.gui.parameters.flipped,
 
-					// geometry.gui.parameters.sides
 
-
 
-				].join( ', ' ) + ' )';
 
-
 
-		}
 
-
 
-	}
 
-
 
-	return geometry;
 
-
 
-};
 
-
 
-// SphereGeometry
 
-
 
-THREE._SphereGeometry = THREE.SphereGeometry;
 
-THREE.SphereGeometry = function ( radius, segmentsWidth, segmentsHeight ) {
 
-
 
-	var geometry = new THREE._SphereGeometry( radius, segmentsWidth, segmentsHeight );
 
-
 
-	geometry.gui = {
 
-
 
-		parameters: {
 
-
 
-			radius: radius,
 
-			segmentsWidth: segmentsWidth,
 
-			segmentsHeight: segmentsHeight
 
-
 
-		},
 
-
 
-		getCode: function () {
 
-
 
-			return 'new THREE.SphereGeometry( ' + [
 
-
 
-					geometry.gui.parameters.radius,
 
-					geometry.gui.parameters.segmentsWidth,
 
-					geometry.gui.parameters.segmentsHeight
 
-
 
-				].join( ', ' ) + ' )';
 
-
 
-		}
 
-
 
-	}
 
-
 
-	return geometry;
 
-
 
-};
 
-
 
-// TorusGeometry
 
-
 
-THREE._TorusGeometry = THREE.TorusGeometry;
 
-THREE.TorusGeometry = function ( radius, tube, segmentsR, segmentsT, arc ) {
 
-
 
-	var geometry = new THREE._TorusGeometry( radius, tube, segmentsR, segmentsT, arc );
 
-
 
-	geometry.gui = {
 
-
 
-		parameters: {
 
-
 
-			radius: radius,
 
-			tube: tube,
 
-			segmentsR: segmentsR,
 
-			segmentsT: segmentsT,
 
-			arc: arc
 
-
 
-		},
 
-
 
-		getCode: function () {
 
-
 
-			return 'new THREE.TorusGeometry( ' + [
 
-
 
-					geometry.gui.parameters.radius,
 
-					geometry.gui.parameters.tube,
 
-					geometry.gui.parameters.segmentsR,
 
-					geometry.gui.parameters.segmentsT
 
-
 
-				].join( ', ' ) + ' )';
 
-
 
-		}
 
-
 
-	}
 
-
 
-	return geometry;
 
-
 
-};
 
-
 
-// MeshBasicMaterial
 
-
 
-THREE.MeshBasicMaterial.prototype.gui = {
 
-
 
-	getCode: function () {
 
-
 
-		return 'new THREE.MeshBasicMaterial( { ' + [
 
-
 
-				'color: 0x' + material.color.getHex().toString(16)
 
-
 
-			].join( ', ' ) + ' } )';
 
-
 
-	}
 
-
 
-};

+ 0 - 226
gui/js/Code.js
查看文件 

@@ -1,226 +0,0 @@
 
-var Code = function () {
 
-
 
-	var _domElement = document.createElement( 'div' );
 
-	_domElement.style.position = 'absolute';
 
-	_domElement.style.backgroundColor = '#f0f0f0';
 
-	_domElement.style.overflow = 'auto';
 
-
 
-	//
 
-
 
-	var _html = false;
 
-
 
-	var _checkbox = document.createElement( 'input' );
 
-	_checkbox.type = 'checkbox';
 
-	_checkbox.style.margin = '20px 6px 0px 20px';
 
-	_checkbox.addEventListener( 'click', function () { _html = !_html; _update(); }, false );
 
-	_domElement.appendChild( _checkbox );
 
-
 
-	var _preview = document.createElement( 'a' );
 
-	_preview.href = '#';
 
-	_preview.innerHTML = 'preview';
 
-	_preview.style.margin = '20px 6px 0px 20px';
 
-	_preview.addEventListener( 'click', function () { 
-
 
-			// Get unescaped code gen
 
-
 
-			var temp=document.createElement("pre");
 
-			temp.innerHTML = _codegen( true );
 
-			temp = temp.firstChild.nodeValue;
 
-			temp = temp.replace("js/Three.js", "../build/Three.js");
 
-
 
-			var opener = window.open('','myconsole',
 
-			  'width=800,height=400'
 
-			   +',menubar=1'
 
-			   +',toolbar=0'
 
-			   +',status=1'
 
-			   +',scrollbars=1'
 
-			   +',resizable=1');
 
-
 
-			opener.document.writeln( temp );
 
-			opener.document.close();
 
-
 
-		}, false 
-	);
 
-	_domElement.appendChild( _preview );
 
-
 
-
 
-	/*
 
-	var _checkboxText = document.createElement( 'span' );
 
-	_checkboxText.style.fontFamily = 'Monospace';
 
-	_checkboxText.innerText = 'HTML';
 
-	_domElement.appendChild( _checkboxText );
 
-	*/
 
-
 
-	//
 
-
 
-	var _code = document.createElement( 'pre' );
 
-	_code.style.color = '#404040';
 
-	_code.style.margin = '20px';
 
-	_code.style.fontSize = '13px';
 
-	_code.style.whiteSpace = 'pre'; // 'pre-wrap'
 
-	_domElement.appendChild( _code );
 
-
 
-	//
 
-
 
-	var _list = [];
 
-
 
-	var _codegen = function (html) {
 
-		var string = '';
 
-
 
-		console.log(_list);
 
-		string += [
 
-
 
-			'var camera, scene, renderer;',
 
-			'',
 
-			'init();',
 
-			'animate();',
 
-			'',
 
-			'function init() {',
 
-			'',
 
-			'\tcamera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );',
 
-			'\tcamera.position.z = 500;',
 
-			'',
 
-			'\tscene = new THREE.Scene();',
 
-			''
 
-
 
-		].join( '\n' );
 
-
 
-		for ( var i = 0, l = _list.length; i < l; i ++ ) {
 
-
 
-			string += _list[ i ] + '\n';
 
-
 
-		}
 
-
 
-		string += [
 
-
 
-			'',
 
-			'\trenderer = new THREE.WebGLRenderer()',
 
-			'\trenderer.setSize( window.innerWidth, window.innerHeight );',
 
-			'\tdocument.body.appendChild( renderer.domElement );',
 
-			'',
 
-			'}',
 
-			'',
 
-			'function animate() {',
 
-			'',
 
-			'\trequestAnimationFrame( animate );',
 
-			'\trender();',
 
-			'',
 
-			'}',
 
-			'',
 
-			'function render() {',
 
-			'',
 
-			'\trenderer.render( scene, camera );',
 
-			'',
 
-			'}'
 
-
 
-		].join( '\n' );
 
-
 
-		if ( html ) {
 
-
 
-			string = '&lt;!doctype html&gt;\n&lt;html&gt;\n\t&lt;body&gt;\
 
-			\n\t\t&lt;style&gt; body {background-color: #f0f0f0;} &lt;/style&gt;\
 
-			\n\t\t&lt;script src=\"js/Three.js\"&gt;&lt;/script&gt;\
 
-			\n\t\t&lt;script&gt;\n' 
-			+ ( '\n' + string ).replace( /\n/gi, '\n\t\t\t' ) + 
-			'\n\n\t\t&lt;/script&gt;\n\t&lt;/body&gt;\n&lt;/html&gt;';
 
-		}
 
-
 
-		return string;
 
-	}
 
-
 
-	var _update = function () {
 
-
 
-		_code.innerHTML = _codegen( _html );
 
-
 
-	}
 
-
 
-	var _strfor = function(str) {
 
-	    for (var i=1; i<arguments.length; i++) {
 
-	    	if (arguments[i].toFixed) {
 
-	    		arguments[i] = arguments[i].toFixed(2);
 
-	    	}
 
-	        str = str.replace('{'+(i-1)+'}', arguments[i]);
 
-	    }
 
-	    return str;
 
-	}
 
-
 
-	// signals
 
-
 
-	signals.updated.add( function ( scene ) {
 
-
 
-		_list.length = 0;
 
-
 
-		for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
 
-
 
-			var object = scene.children[ i ];
 
-
 
-			if ( object.geometry == undefined || object.geometry.gui == undefined ) {
 
-
 
-				if (object instanceof THREE.Camera) {
 
-					var string = '';
 
-					string += _strfor( '\n\tcamera.position.set({0},{1},{2});', object.position.x, object.position.y, object.position.z);
 
-					string += _strfor( '\n\tcamera.rotation.set({0},{1},{2});', object.rotation.x, object.rotation.y, object.rotation.z);
 
-
 
-					_list.push( string );
 
-
 
-				} else {
 
-					_list.push( 'TODO' );
 
-				}
 
-				continue;
 
-
 
-			}
 
-
 
-			if ( object instanceof THREE.Mesh ) {
 
-
 
-				var string = '';
 
-				string += '\n\tvar geometry = ' + object.geometry.gui.getCode() + ';';
 
-				string += '\n\tvar material = ' + object.material.gui.getCode() + ';';
 
-				string += '\n\tvar mesh = new THREE.Mesh( geometry, material );';
 
-
 
-				if ( object.position.x != 0 ) string += '\n\tmesh.position.x = ' + object.position.x + ';';
 
-				if ( object.position.y != 0 ) string += '\n\tmesh.position.y = ' + object.position.y + ';';
 
-				if ( object.position.z != 0 ) string += '\n\tmesh.position.z = ' + object.position.z + ';';
 
-
 
-				if ( object.rotation.x != 0 ) string += '\n\tmesh.rotation.x = ' + object.rotation.x + ';';
 
-				if ( object.rotation.y != 0 ) string += '\n\tmesh.rotation.y = ' + object.rotation.y + ';';
 
-				if ( object.rotation.z != 0 ) string += '\n\tmesh.rotation.z = ' + object.rotation.z + ';';
 
-
 
-				if ( object.scale.x != 1 ) string += '\n\tmesh.scale.x = ' + object.scale.x + ';';
 
-				if ( object.scale.y != 1 ) string += '\n\tmesh.scale.y = ' + object.scale.y + ';';
 
-				if ( object.scale.z != 1 ) string += '\n\tmesh.scale.z = ' + object.scale.z + ';';
 
-
 
-				string += '\n\tscene.add( mesh );';
 
-
 
-				_list.push( string );
 
-
 
-			}
 
-
 
-		}
 
-
 
-		_update();
 
-
 
-	} );
 
-
 
-	//
 
-
 
-	this.getDOMElement = function () {
 
-
 
-		return _domElement;
 
-
 
-	}
 
-
 
-	this.setPosition = function ( x, y ) {
 
-
 
-		_domElement.style.left = x + 'px';
 
-		_domElement.style.top = y + 'px';
 
-
 
-	}
 
-
 
-	this.setSize = function ( width, height ) {
 
-
 
-		_domElement.style.width = width + 'px';
 
-		_domElement.style.height = height + 'px';
 
-
 
-	}
 
-
 
-}

+ 0 - 72
gui/js/UI.Toolbar.js
查看文件 

@@ -1,72 +0,0 @@
 
-UI.Toolbar = function () {
 
-
 
-	var _domElement = document.createElement( 'div' );
 
-	_domElement.style.position = 'absolute';
 
-	_domElement.style.backgroundColor = '#404040';
 
-
 
-	// CUBE
 
-
 
-	var _button = document.createElement( 'button' );
 
-	_button.innerHTML = 'Cube';
 
-	_button.addEventListener( 'click', function ( event ) {
 
-
 
-		var geometry = new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 );
 
-		var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-		var mesh = new THREE.Mesh( geometry, material );
 
-
 
-		signals.added.dispatch( mesh );
 
-
 
-	}, false );
 
-	_domElement.appendChild( _button );
 
-
 
-	// SPHERE
 
-
 
-	var _button = document.createElement( 'button' );
 
-	_button.innerHTML = 'Sphere';
 
-	_button.addEventListener( 'click', function ( event ) {
 
-
 
-		var geometry = new THREE.SphereGeometry( 75, 20, 10 );
 
-		var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-		var mesh = new THREE.Mesh( geometry, material );
 
-
 
-		signals.added.dispatch( mesh );
 
-
 
-	}, false );
 
-	_domElement.appendChild( _button );
 
-
 
-	// TORUS
 
-
 
-	var _button = document.createElement( 'button' );
 
-	_button.innerHTML = 'Torus';
 
-	_button.addEventListener( 'click', function ( event ) {
 
-
 
-		var geometry = new THREE.TorusGeometry( 50, 20, 20, 20 );
 
-		var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-		var mesh = new THREE.Mesh( geometry, material );
 
-
 
-		signals.added.dispatch( mesh );
 
-
 
-	}, false );
 
-	_domElement.appendChild( _button );
 
-
 
-	this.getDOMElement = function () {
 
-
 
-		return _domElement;
 
-
 
-	};
 
-
 
-	this.setPosition = function ( x, y ) {
 
-
 
-		_domElement.style.left = x + 'px';
 
-		_domElement.style.top = y + 'px';
 
-
 
-	};
 
-
 
-	this.setSize = function ( width, height ) {
 
-
 
-		_domElement.style.width = width + 'px';
 
-		_domElement.style.height = height + 'px';
 
-
 
-	};
 
-
 
-};

+ 0 - 257
gui/js/UI.Viewport.js
查看文件 

@@ -1,257 +0,0 @@
 
-UI.Viewport = function () {
 
-
 
-	var _width, _height;
 
-	var _isMouseDown = false;
 
-	var _snapToAxis = null;
 
-
 
-	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;
 
-	_camera.lookAt( new THREE.Vector3() );
 
-
 
-	var _controls = new THREE.TrackballControls( _camera );
 
-	_controls.rotateSpeed = 1.0;
 
-	_controls.zoomSpeed = 1.2;
 
-	_controls.panSpeed = 0.8;
 
-	_controls.noZoom = false;
 
-	_controls.noPan = false;
 
-	_controls.staticMoving = true;
 
-	_controls.dynamicDampingFactor = 0.3;
 
-
 
-	// 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 } ) );
 
-	_sceneHelpers.add( _grid );
 
-
 
-	//
 
-
 
-	var _scene = new THREE.Scene();
 
-
 
-	_scene.add(_camera);
 
-
 
-	/*
 
-	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;
 
-	_plane.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
 
-
 
-	_sceneHelpers.add( _plane );
 
-
 
-	var _projector = new THREE.Projector();
 
-
 
-	var _renderer = new THREE.WebGLRenderer();
 
-	_renderer.autoClear = false;
 
-	_renderer.domElement.addEventListener( 'mousedown', function ( event ) {
 
-
 
-		event.preventDefault();
 
-
 
-		_isMouseDown = true;
 
-
 
-		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.intersectObjects( _scene.children );
 
-
 
-		if ( intersects.length ) {
 
-
 
-			_SELECTED = intersects[ 0 ].object;
 
-
 
-			_controls.enabled = false;
 
-
 
-			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.intersectObjects( _scene.children );
 
-
 
-		if ( _SELECTED ) {
 
-
 
-			var intersects = ray.intersectObject( _plane );
 
-			_SELECTED.position.copy( intersects[ 0 ].point.subSelf( _offset ) );
 
-
 
-			switch ( _snapToAxis ) {
 
-
 
-				case 'x':
 
-					_SELECTED.position.y = _plane.position.y;
 
-					_SELECTED.position.z = _plane.position.z;
 
-					break;
 
-
 
-				case 'y':
 
-					_SELECTED.position.x = _plane.position.x;
 
-					_SELECTED.position.z = _plane.position.z;
 
-					break;
 
-
 
-				case 'z':
 
-					_SELECTED.position.x = _plane.position.x;
 
-					_SELECTED.position.y = _plane.position.y;
 
-					break;
 
-
 
-			}
 
-
 
-			_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 );
 
-
 
-		} else {
 
-
 
-			_HOVERED = null;
 
-
 
-		}
 
-
 
-		_render();
 
-
 
-	}, false );
 
-	_renderer.domElement.addEventListener( 'mouseup', function ( event ) {
 
-
 
-		// event.preventDefault();
 
-
 
-		_isMouseDown = false; 
-		_snapToAxis = null;
 
-
 
-		_controls.enabled = true;
 
-
 
-		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 );
 
-	*/
 
-	document.addEventListener( 'keydown', function ( event ) {
 
-
 
-		if ( _isMouseDown ) {
 
-
 
-			// console.log( event.keyCode );
 
-
 
-			switch ( event.keyCode ) {
 
-
 
-				case 88: // x
 
-					_snapToAxis = 'x';
 
-					break;
 
-
 
-				case 89: // y
 
-					_snapToAxis = 'y';
 
-					break;
 
-
 
-				case 90: // z
 
-					_snapToAxis = 'z';
 
-					break;
 
-
 
-			}
 
-
 
-		}
 
-
 
-	}, 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 () {
 
-
 
-		_controls.update();
 
-
 
-		_renderer.clear();
 
-		_renderer.render( _sceneHelpers, _camera );
 
-		_renderer.render( _scene, _camera );
 
-
 
-	};
 
-
 
-}

+ 359 - 15
gui/js/UI.js
查看文件 

@@ -1,30 +1,374 @@
 
-var UI = function () {
 
+var UI = {};
 
 
-	var _domElement = document.createElement( 'div' );
 
-	_domElement.style.position = 'absolute';
 
+UI.Element = function () {};
 
 
-	var _viewport = new UI.Viewport();
 
-	_domElement.appendChild( _viewport.getDOMElement() );
 
+UI.Element.prototype = {
 
 
-	var _toolbar = new UI.Toolbar();
 
-	_domElement.appendChild( _toolbar.getDOMElement() );
 
+	setX: function ( value ) {
 
 
-	this.getDOMElement = function () {
 
+		this.dom.style.left = value;
 
 
-		return _domElement;
 
+		return this;
 
+
 
+	},
 
+
 
+	setY: function ( value ) {
 
+
 
+		this.dom.style.top = value;
 
+
 
+		return this;		
+
 
+	},
 
+
 
+	setWidth: function ( value ) {
 
+
 
+		this.dom.style.width = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setHeight: function ( value ) {
 
+
 
+		this.dom.style.height = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	// border
 
+
 
+	setBorder: function ( value ) {
 
+
 
+		this.dom.style.border = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setBorderTop: function ( value ) {
 
+
 
+		this.dom.style.borderTop = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setBorderBottom: function ( value ) {
 
+
 
+		this.dom.style.borderBottom = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setBorderLeft: function ( value ) {
 
+
 
+		this.dom.style.borderLeft = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setBorderRight: function ( value ) {
 
+
 
+		this.dom.style.borderRight = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	// margin
 
+
 
+	setMargin: function ( value ) {
 
+
 
+		this.dom.style.margin = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setMarginTop: function ( value ) {
 
+
 
+		this.dom.style.marginTop = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setMarginBottom: function ( value ) {
 
+
 
+		this.dom.style.marginBottom = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setMarginLeft: function ( value ) {
 
+
 
+		this.dom.style.marginLeft = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setMarginRight: function ( value ) {
 
+
 
+		this.dom.style.marginRight = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	// padding
 
+
 
+	setPadding: function ( value ) {
 
+
 
+		this.dom.style.padding = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	//
 
+
 
+	setFontWeight: function ( value ) {
 
+
 
+		this.dom.style.fontWeight = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setColor: function ( value ) {
 
+
 
+		this.dom.style.color = value;
 
+		return this;
 
+
 
+	},
 
+
 
+	setBackgroundColor: function ( value ) {
 
+
 
+		this.dom.style.backgroundColor = value;
 
+		return this;
 
 
 	}
 
 
-	this.setSize = function ( width, height ) {
 
+}
 
+
 
+
 
+// Panel
 
+
 
+UI.Panel = function ( position ) {
 
+
 
+	UI.Element.call( this );
 
+
 
+	this.dom = document.createElement( 'div' );
 
+	this.dom.style.position = position || 'relative';
 
+
 
+	this.dom.addEventListener( 'mousedown', function ( event ) { event.preventDefault() }, false );
 
+
 
+	return this;
 
+};
 
+
 
+UI.Panel.prototype = new UI.Element();
 
+UI.Panel.prototype.constructor = UI.Panel;
 
+
 
+UI.Panel.prototype.add = function ( node ) {
 
+
 
+	this.dom.appendChild( node.dom );
 
+	return this;
 
+
 
+};
 
+
 
+
 
+// Text
 
+
 
+UI.Text = function ( position ) {
 
+
 
+	UI.Element.call( this );
 
+
 
+	this.dom = document.createElement( 'span' );
 
+	this.dom.style.position = position || 'relative';
 
+
 
+	return this;
 
+
 
+};
 
+
 
+UI.Text.prototype = new UI.Element();
 
+UI.Text.prototype.constructor = UI.Text;
 
+
 
+UI.Text.prototype.setText = function ( value ) {
 
+
 
+	this.dom.innerText = value;
 
+	return this;
 
+
 
+};
 
+
 
 
-		_domElement.style.width = width + 'px';
 
-		_domElement.style.height = height + 'px';
 
+// IntNumber
 
 
-		_viewport.setSize( width, height - 50 );
 
+UI.IntNumber = function ( position ) {
 
 
-		_toolbar.setPosition( 0, height - 50 );
 
-		_toolbar.setSize( width, 50 );
 
+	UI.Element.call( this );
 
+
 
+	this.dom = document.createElement( 'span' );
 
+	this.dom.style.position = position || 'relative';
 
+	this.dom.innerText = '0.00';
 
+	this.dom.style.marginTop = '2px';
 
+	this.dom.style.color = '#0080f0';
 
+	this.dom.style.fontSize = '12px';
 
+	this.dom.style.textDecoration = 'underline';
 
+
 
+	var scope = this;
 
+	var onMouseDownValue, onMouseDownScreenX, onMouseDownScreenY;
 
+
 
+	var onMouseDown = function ( event ) {
 
+
 
+		event.preventDefault();
 
+
 
+		onMouseDownValue = parseFloat( scope.dom.innerText );
 
+		onMouseDownScreenX = event.screenX;
 
+		onMouseDownScreenY = event.screenY;
 
+
 
+		document.addEventListener( 'mousemove', onMouseMove, false );
 
+		document.addEventListener( 'mouseup', onMouseUp, false );
 
+
 
+	}
 
+
 
+	var onMouseMove = function ( event ) {
 
+
 
+		var dx = event.screenX - onMouseDownScreenX;
 
+		var dy = event.screenY - onMouseDownScreenY;
 
+
 
+		scope.dom.innerText = ( onMouseDownValue - ( dx - dy ) ).toFixed( 0 ); 
+
 
+	}
 
+
 
+	var onMouseUp = function ( event ) {
 
+
 
+		document.removeEventListener( 'mousemove', onMouseMove, false );
 
+		document.removeEventListener( 'mouseup', onMouseUp, false );
 
+
 
+	}
 
+
 
+	this.dom.addEventListener( 'mousedown', onMouseDown, false );
 
+
 
+	return this;
 
+
 
+};
 
+
 
+UI.IntNumber.prototype = new UI.Element();
 
+UI.IntNumber.prototype.constructor = UI.IntNumber;
 
+
 
+UI.IntNumber.prototype.setNumber = function ( value ) {
 
+
 
+	this.dom.innerText = value.toFixed( 0 );
 
+	return this;
 
+
 
+};
 
+
 
+
 
+// FloatNumber
 
+
 
+UI.FloatNumber = function ( position ) {
 
+
 
+	UI.Element.call( this );
 
+
 
+	this.dom = document.createElement( 'span' );
 
+	this.dom.style.position = position || 'relative';
 
+	this.dom.innerText = '0.00';
 
+	this.dom.style.marginTop = '2px';
 
+	this.dom.style.color = '#0080f0';
 
+	this.dom.style.fontSize = '12px';
 
+	this.dom.style.textDecoration = 'underline';
 
+
 
+	var scope = this;
 
+	var onMouseDownValue, onMouseDownScreenX, onMouseDownScreenY;
 
+
 
+	var onMouseDown = function ( event ) {
 
+
 
+		event.preventDefault();
 
+
 
+		onMouseDownValue = parseFloat( scope.dom.innerText );
 
+		onMouseDownScreenX = event.screenX;
 
+		onMouseDownScreenY = event.screenY;
 
+
 
+		document.addEventListener( 'mousemove', onMouseMove, false );
 
+		document.addEventListener( 'mouseup', onMouseUp, false );
 
+
 
+	}
 
+
 
+	var onMouseMove = function ( event ) {
 
+
 
+		var dx = event.screenX - onMouseDownScreenX;
 
+		var dy = event.screenY - onMouseDownScreenY;
 
+
 
+		scope.dom.innerText = ( onMouseDownValue + ( dx - dy ) / 100 ).toFixed( 2 ); 
 
 	}
 
 
+	var onMouseUp = function ( event ) {
 
+
 
+		document.removeEventListener( 'mousemove', onMouseMove, false );
 
+		document.removeEventListener( 'mouseup', onMouseUp, false );
 
+
 
+	}
 
+
 
+	this.dom.addEventListener( 'mousedown', onMouseDown, false );
 
+
 
+	return this;
 
+
 
+};
 
+
 
+UI.FloatNumber.prototype = new UI.Element();
 
+UI.FloatNumber.prototype.constructor = UI.FloatNumber;
 
+
 
+UI.FloatNumber.prototype.setNumber = function ( value ) {
 
+
 
+	this.dom.innerText = value.toFixed( 2 );
 
+	return this;
 
+
 
+};
 
+
 
+
 
+// Break
 
+
 
+UI.Break = function () {
 
+
 
+	UI.Element.call( this );
 
+
 
+	this.dom = document.createElement( 'br' );
 
+
 
+	return this;
 
+
 
+};
 
+
 
+UI.Break.prototype = new UI.Element();
 
+UI.Break.prototype.constructor = UI.Break;
 
+
 
+
 
+// HorizontalRule
 
+
 
+UI.HorizontalRule = function ( position ) {
 
+
 
+	UI.Element.call( this );
 
+
 
+	this.dom = document.createElement( 'hr' );
 
+	this.dom.style.position = position || 'relative';
 
+
 
+	return this;
 
+
 
+};
 
+
 
+UI.HorizontalRule.prototype = new UI.Element();
 
+UI.HorizontalRule.prototype.constructor = UI.HorizontalRule;
 
+
 
+// Button
 
+
 
+UI.Button = function ( position ) {
 
+
 
+	UI.Element.call( this );
 
+
 
+	this.dom = document.createElement( 'button' );
 
+	this.dom.style.position = position || 'relative';
 
+
 
+	return this;
 
+
 
+};
 
+
 
+UI.Button.prototype = new UI.Element();
 
+UI.Button.prototype.constructor = UI.Button;
 
+
 
+UI.Button.prototype.setText = function ( value ) {
 
+
 
+	this.dom.innerText = value;
 
+	return this;
 
+
 
 };

文件差异内容过多而无法显示
+ 0 - 7
gui/js/libs/signals.min.js


+ 70 - 0
gui/js/ui/Panel.js
查看文件 

@@ -0,0 +1,70 @@
 
+var Panel = function ( signals ) {
 
+
 
+	var container = new UI.Panel( 'absolute' );
 
+	container.setWidth( '300px' ).setHeight( '100%' );
 
+	container.setBackgroundColor( '#eee' );
 
+
 
+
 
+	// Properties
 
+
 
+	var properties = new UI.Panel();
 
+	properties.setMargin( '8px' );
 
+
 
+	properties.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
 
+
 
+	properties.add( new UI.Break() );
 
+	properties.add( new UI.Break() );
 
+
 
+	properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setX( '90px' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setX( '160px' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setX( '230px' ) );
 
+
 
+	properties.add( new UI.HorizontalRule() );
 
+
 
+	properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setX( '90px' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setX( '160px' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setX( '230px' ) );
 
+
 
+	properties.add( new UI.HorizontalRule() );
 
+
 
+	properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '90px' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '160px' ) );
 
+	properties.add( new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '230px' ) );
 
+
 
+	properties.add( new UI.Break() );
 
+	properties.add( new UI.Break() );
 
+
 
+	container.add( properties );
 
+
 
+
 
+	// Geometry
 
+
 
+	var properties = new UI.Panel();
 
+	properties.setMargin( '8px' );
 
+
 
+	properties.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
 
+
 
+	properties.add( new UI.Break() );
 
+	properties.add( new UI.Break() );
 
+
 
+	container.add( properties );
 
+
 
+
 
+	// Material
 
+
 
+	var properties = new UI.Panel();
 
+	properties.setMargin( '8px' );
 
+
 
+	properties.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
 
+
 
+	properties.add( new UI.Break() );
 
+	properties.add( new UI.Break() );
 
+
 
+	container.add( properties );
 
+
 
+	return container;
 
+
 
+}

+ 71 - 0
gui/js/ui/Viewport.js
查看文件 

@@ -0,0 +1,71 @@
 
+var Viewport = function ( signals ) {
 
+
 
+	var container = new UI.Panel( 'absolute' );
 
+	container.setBackgroundColor( '#aaa' );
 
+
 
+	//
 
+
 
+	var sceneHelpers = new THREE.Scene();
 
+
 
+	var plane = new THREE.Mesh(
 
+		new THREE.PlaneGeometry( 1000, 1000, 20, 20 ),
 
+		new THREE.MeshBasicMaterial( { color: 0x606060, wireframe: true, transparent: true } )
 
+	);
 
+	sceneHelpers.add( plane );
 
+
 
+	var scene = new THREE.Scene();
 
+
 
+	var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
 
+	camera.position.set( 500, 250, 500 );
 
+	camera.lookAt( scene.position );
 
+	scene.add( camera );
 
+
 
+	var controls = new THREE.TrackballControls( camera, container.dom );
 
+	controls.rotateSpeed = 1.0;
 
+	controls.zoomSpeed = 1.2;
 
+	controls.panSpeed = 0.8;
 
+	controls.noZoom = false;
 
+	controls.noPan = false;
 
+	controls.staticMoving = true;
 
+	controls.dynamicDampingFactor = 0.3;
 
+	controls.addEventListener( 'change', render );
 
+
 
+	var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+	renderer.autoClear = false;
 
+	container.dom.appendChild( renderer.domElement );
 
+
 
+	signals.windowResize.add( update );
 
+
 
+	animate();
 
+
 
+	//
 
+
 
+	function animate() {
 
+
 
+		requestAnimationFrame( animate );
 
+		controls.update();
 
+
 
+	}
 
+
 
+	function render() {
 
+
 
+		renderer.clear();
 
+		renderer.render( sceneHelpers, camera );
 
+		renderer.render( scene, camera );
 
+
 
+	}
 
+
 
+	function update() {
 
+
 
+		camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
 
+		camera.updateProjectionMatrix();
 
+
 
+		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
+
 
+		render();
 
+
 
+	}
 
+
 
+	return container;
 
+
 
+}

+ 1 - 1
src/objects/Mesh.js
查看文件 

@@ -15,7 +15,7 @@ THREE.Mesh = function ( geometry, material ) {
 
 
 		// calc bound radius
 
 
-		if( ! this.geometry.boundingSphere ) {
 
+		if ( ! this.geometry.boundingSphere ) {
 
 
 			this.geometry.computeBoundingSphere();

部分文件因为文件数量过多而无法显示