Browse Source

Editor: TorusKnot parameters panel.

Mr.doob 12 years ago
parent
commit
650ddabb06

+ 1 - 0
editor/index.html

@@ -109,6 +109,7 @@
 		<script src="js/ui/Sidebar.Geometry.SphereGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.SphereGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.IcosahedronGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.IcosahedronGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.TorusGeometry.js"></script>
+		<script src="js/ui/Sidebar.Geometry.TorusKnotGeometry.js"></script>
 		<script src="js/ui/Sidebar.Material.js"></script>
 		<script src="js/ui/Sidebar.Material.js"></script>
 		<script src="js/ui/Viewport.js"></script>
 		<script src="js/ui/Viewport.js"></script>
 
 

+ 106 - 0
editor/js/ui/Sidebar.Geometry.TorusKnotGeometry.js

@@ -0,0 +1,106 @@
+Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
+
+	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
+	container.setPaddingTop( '10px' );
+
+	var geometry = object.geometry;
+
+	// radius
+
+	var radiusRow = new UI.Panel();
+	var radius = new UI.Number( geometry.radius ).onChange( update );
+
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// tube
+
+	var tubeRow = new UI.Panel();
+	var tube = new UI.Number( geometry.tube ).onChange( update );
+
+	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubeRow.add( tube );
+
+	container.add( tubeRow );
+
+	// radialSegments
+
+	var radialSegmentsRow = new UI.Panel();
+	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
+
+	radialSegmentsRow.add( new UI.Text( 'Radial segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	radialSegmentsRow.add( radialSegments );
+
+	container.add( radialSegmentsRow );
+
+	// tubularSegments
+
+	var tubularSegmentsRow = new UI.Panel();
+	var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
+
+	tubularSegmentsRow.add( new UI.Text( 'Tubular segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubularSegmentsRow.add( tubularSegments );
+
+	container.add( tubularSegmentsRow );
+
+	// p
+
+	var pRow = new UI.Panel();
+	var p = new UI.Number( geometry.p ).onChange( update );
+
+	pRow.add( new UI.Text( 'P' ).setWidth( '90px' ).setColor( '#666' ) );
+	pRow.add( p );
+
+	container.add( pRow );
+
+	// q
+
+	var qRow = new UI.Panel();
+	var q = new UI.Number( geometry.q ).onChange( update );
+
+	pRow.add( new UI.Text( 'Q' ).setWidth( '90px' ).setColor( '#666' ) );
+	pRow.add( q );
+
+	container.add( qRow );
+
+	// heightScale
+
+	var heightScaleRow = new UI.Panel();
+	var heightScale = new UI.Number( geometry.heightScale ).onChange( update );
+
+	pRow.add( new UI.Text( 'Height scale' ).setWidth( '90px' ).setColor( '#666' ) );
+	pRow.add( heightScale );
+
+	container.add( heightScaleRow );
+
+
+	//
+
+	function update() {
+
+		delete object.__webglInit; // TODO: Remove hack (WebGLRenderer refactoring)
+
+		object.geometry.dispose();
+
+		object.geometry = new THREE.TorusKnotGeometry(
+			radius.getValue(),
+			tube.getValue(),
+			radialSegments.getValue(),
+			tubularSegments.getValue(),
+			p.getValue(),
+			q.getValue(),
+			heightScale.getValue()
+		);
+
+		object.geometry.computeBoundingSphere();
+
+		signals.objectChanged.dispatch( object );
+
+	}
+
+	return container;
+
+}

+ 5 - 0
editor/js/ui/Sidebar.Geometry.js

@@ -133,6 +133,11 @@ Sidebar.Geometry = function ( signals ) {
 				parameters = new Sidebar.Geometry.TorusGeometry( signals, object );
 				parameters = new Sidebar.Geometry.TorusGeometry( signals, object );
 				container.add( parameters );
 				container.add( parameters );
 
 
+			} else if ( selected instanceof THREE.TorusKnotGeometry ) {
+
+				parameters = new Sidebar.Geometry.TorusKnotGeometry( signals, object );
+				container.add( parameters );
+
 			}
 			}
 
 
 		} else {
 		} else {

+ 11 - 0
examples/js/exporters/SceneExporter2.js

@@ -93,6 +93,17 @@ THREE.SceneExporter2.prototype = {
 					data.tubularSegments = geometry.tubularSegments;
 					data.tubularSegments = geometry.tubularSegments;
 					data.arc = geometry.arc;
 					data.arc = geometry.arc;
 
 
+				} else if ( geometry instanceof THREE.TorusKnotGeometry ) {
+
+					data.type = 'TorusKnotGeometry';
+					data.radius = geometry.radius;
+					data.tube = geometry.tube;
+					data.radialSegments = geometry.radialSegments;
+					data.tubularSegments = geometry.tubularSegments;
+					data.p = geometry.p;
+					data.q = geometry.q;
+					data.heightScale = geometry.heightScale;
+
 				} else if ( geometry instanceof THREE.Geometry ) {
 				} else if ( geometry instanceof THREE.Geometry ) {
 
 
 					data.type = 'Geometry';
 					data.type = 'Geometry';

+ 14 - 0
examples/js/loaders/SceneLoader2.js

@@ -132,6 +132,20 @@ THREE.SceneLoader2.prototype = {
 
 
 					break;
 					break;
 
 
+				case 'TorusKnotGeometry':
+
+					geometry = new THREE.TorusKnotGeometry(
+						data.radius,
+						data.tube,
+						data.radialSegments,
+						data.tubularSegments,
+						data.p,
+						data.q,
+						data.heightScale
+					);
+
+					break;
+
 				case 'Geometry':
 				case 'Geometry':
 
 
 					geometry = loader.parse( data.data ).geometry;
 					geometry = loader.parse( data.data ).geometry;