GUI: Improved code generation setup.

gui/index.html

@@ -41,6 +41,7 @@
 		<script type="text/javascript" src="js/UI.Viewports.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>
 
@@ -109,9 +110,6 @@
 			var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 			var mesh = new THREE.Mesh( geometry, material );
 
-			geometry.code = 'new THREE.SphereGeometry( 75, 20, 10 )';
-			material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } )';
-
 			signals.added.dispatch( mesh );
 
 			//

gui/js/Code.Templates.js

@@ -0,0 +1,135 @@
+// 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: ' + material.color.getHex()
+
+			].join( ', ' ) + ' } )';
+
+	}
+
+};

gui/js/Code.js

@@ -65,6 +65,7 @@ var Code = function () {
 
 			'',
 			'\trenderer = new THREE.WebGLRenderer()',
+			'\tdocument.body.appendChild( renderer.domElement );',
 			'',
 			'}',
 			'',
@@ -106,8 +107,8 @@ var Code = function () {
 			if ( object instanceof THREE.Mesh ) {
 
 				var string = '';
-				string += '\n\tvar geometry = ' + object.geometry.code + ';';
-				string += '\n\tvar material = ' + object.materials[ 0 ].code + ';';
+				string += '\n\tvar geometry = ' + object.geometry.gui.getCode() + ';';
+				string += '\n\tvar material = ' + object.materials[ 0 ].gui.getCode() + ';';
 				string += '\n\tvar mesh = new THREE.Mesh( geometry, material );';
 
 				if ( object.position.x != 0 ) string += '\n\tmesh.position.x = ' + object.position.x + ';';

gui/js/UI.Toolbar.js

@@ -14,9 +14,6 @@ UI.Toolbar = function () {
 		var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 		var mesh = new THREE.Mesh( geometry, material );
 
-		geometry.code = 'new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 )';
-		material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff } )';
-
 		signals.added.dispatch( mesh );
 
 	}, false );
@@ -32,9 +29,6 @@ UI.Toolbar = function () {
 		var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 		var mesh = new THREE.Mesh( geometry, material );
 
-		geometry.code = 'new THREE.SphereGeometry( 75, 20, 10 )';
-		material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff } )';
-
 		signals.added.dispatch( mesh );
 
 	}, false );
@@ -50,9 +44,6 @@ UI.Toolbar = function () {
 		var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 		var mesh = new THREE.Mesh( geometry, material );
 
-		geometry.code = 'new THREE.TorusGeometry( 50, 20, 20, 20 )';
-		material.code = 'new THREE.MeshBasicMaterial( { color: 0xffffff } )';
-
 		signals.added.dispatch( mesh );
 
 	}, false );

gui/js/UI.Viewports.js

@@ -27,10 +27,13 @@ UI.Viewports = function () {
 	_views[ 0 ].camera.rotation.x = - Math.PI / 2;
 
 	_views[ 1 ].camera = new THREE.Camera( 50, 1, 1, 5000 ); // front
+	_views[ 1 ].camera.useTarget = false;	
 	_views[ 1 ].camera.position.z = 1000;
 
 	_views[ 2 ].camera = new THREE.Camera( 50, 1, 1, 5000 ); // left
+	_views[ 2 ].camera.useTarget = false;
 	_views[ 2 ].camera.position.x = - 1000;
+	_views[ 2 ].camera.rotation.y = - Math.PI / 2;
 
 	_views[ 3 ].camera = new THREE.Camera( 50, 1, 1, 5000 ); // perspective
 	_views[ 3 ].camera.position.x = 1000;