Cleaned up NURBS examples.

examples/canvas_geometry_nurbs.html

@@ -36,8 +36,7 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-
-			var text, plane;
+			var group;
 
 			var targetRotation = 0;
 			var targetRotationOnMouseDown = 0;
@@ -69,59 +68,58 @@
 
 				scene = new THREE.Scene();
 
-				parent = new THREE.Object3D();
-				parent.position.y = 50;
-				scene.add( parent );
+				group = new THREE.Object3D();
+				group.position.y = 50;
+				scene.add( group );
 
 				// NURBS curve
 
 				var nurbsControlPoints = [];
-				nurbsControlPoints.push( new THREE.Vector4 ( 200, 100, 100, 1 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( 100, 300, -200, 1 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( -100, 200, -40, 5 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( -200, 350, 250, 1 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( 0, 0, 0, 1 ) );
-				var nurbsKnots = [0.0, 0.0, 0.0, 0.0, 0.5, 1.0, 1.0, 1.0, 1.0];
+				var nurbsKnots = [];
 				var nurbsDegree = 3;
-				var nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);
 
-				var posX = 0;
-				var posY = -100;
-				var posZ = 0;
+				for ( var i = 0, j = 20; i < j; i ++ ) {
+
+					nurbsControlPoints.push(
+						new THREE.Vector4 (
+							Math.random() * 400 - 200,
+							Math.random() * 400,
+							Math.random() * 400 - 200,
+							1
+						)
+					);
 
-				var rotX = 0;
-				var rotY = 0;
-				var rotZ = 0;
+					var knot = i / j;
 
-				var scaleX = 1;
-				var scaleY = 1;
-				var scaleZ = 1;
+					if ( i < nurbsDegree ) knot = 0;
+					if ( i >= j - nurbsDegree ) knot = 1;
+
+					nurbsKnots.push( knot );
+
+				}
+
+				var nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);
 
 				var nurbsGeometry = new THREE.Geometry();
-				nurbsGeometry.vertices = nurbsCurve.getPoints(100);
-				var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333, transparent: true } );
+				nurbsGeometry.vertices = nurbsCurve.getPoints( 200 );
+				var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333 } );
+
 				var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
-				nurbsLine.position.set( posX, posY, posZ );
-				nurbsLine.rotation.set( rotX, rotY, rotZ );
-				nurbsLine.scale.set( scaleX, scaleY, scaleZ );
+				nurbsLine.position.set( 0, -100, 0 );
+				group.add( nurbsLine );
 
 				var nurbsControlPointsGeometry = new THREE.Geometry();
 				nurbsControlPointsGeometry.vertices = nurbsCurve.controlPoints;
-				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, transparent: true } );
-				var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
-				nurbsControlPointsLine.position.set( posX, posY, posZ );
-				nurbsControlPointsLine.rotation.set( rotX, rotY, rotZ );
-				nurbsControlPointsLine.scale.set( scaleX, scaleY, scaleZ );
+				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, opacity: 0.25 } );
 
-				parent.add( nurbsLine );
-				parent.add( nurbsControlPointsLine );
+				var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
+				nurbsControlPointsLine.position.copy( nurbsLine.position );
+				group.add( nurbsControlPointsLine );
 
 				//
 
-				renderer = new THREE.CanvasRenderer( { antialias: true } );
+				renderer = new THREE.CanvasRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.sortObjects = false;
-				renderer.sortElements = false;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -229,7 +227,7 @@
 
 			function render() {
 
-				parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
+				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_nurbs.html

@@ -38,8 +38,7 @@
 			var container, stats;
 
 			var camera, scene, renderer;
-
-			var text, plane;
+			var group;
 
 			var targetRotation = 0;
 			var targetRotationOnMouseDown = 0;
@@ -66,63 +65,62 @@
 				info.innerHTML = 'Drag to spin';
 				container.appendChild( info );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 0, 150, 500 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.set( 0, 150, 750 );
 
 				scene = new THREE.Scene();
+				scene.add( new THREE.AmbientLight( 0x808080 ) );
 
-				scene.add( new THREE.AmbientLight( 0x404040 ) );
-
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 0, 1 );
+				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				parent = new THREE.Object3D();
-				parent.position.y = 50;
-				scene.add( parent );
+				group = new THREE.Object3D();
+				group.position.y = 50;
+				scene.add( group );
 
 				// NURBS curve
 
 				var nurbsControlPoints = [];
-				nurbsControlPoints.push( new THREE.Vector4 ( 200, 100, 100, 1 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( 100, 300, -200, 1 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( -100, 200, -40, 1 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( -200, 350, 250, 1 ) );
-				nurbsControlPoints.push( new THREE.Vector4 ( 0, 0, 0, 1 ) );
-				var nurbsKnots = [0.0, 0.0, 0.0, 0.0, 0.5, 1.0, 1.0, 1.0, 1.0];
+				var nurbsKnots = [];
 				var nurbsDegree = 3;
-				var nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);
 
-				var posX = 0;
-				var posY = -100;
-				var posZ = 0;
+				for ( var i = 0, j = 20; i < j; i ++ ) {
+
+					nurbsControlPoints.push(
+						new THREE.Vector4 (
+							Math.random() * 400 - 200,
+							Math.random() * 400,
+							Math.random() * 400 - 200,
+							1
+						)
+					);
 
-				var rotX = 0;
-				var rotY = 0;
-				var rotZ = 0;
+					var knot = i / j;
 
-				var scaleX = 1;
-				var scaleY = 1;
-				var scaleZ = 1;
+					if ( i < nurbsDegree ) knot = 0;
+					if ( i >= j - nurbsDegree ) knot = 1;
+
+					nurbsKnots.push( knot );
+
+				}
+
+				var nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);
 
 				var nurbsGeometry = new THREE.Geometry();
-				nurbsGeometry.vertices = nurbsCurve.getPoints(100);
+				nurbsGeometry.vertices = nurbsCurve.getPoints(200);
 				var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333, transparent: true } );
+
 				var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
-				nurbsLine.position.set( posX, posY, posZ );
-				nurbsLine.rotation.set( rotX, rotY, rotZ );
-				nurbsLine.scale.set( scaleX, scaleY, scaleZ );
+				nurbsLine.position.set( 200, -100, 0 );
+				group.add( nurbsLine );
 
 				var nurbsControlPointsGeometry = new THREE.Geometry();
 				nurbsControlPointsGeometry.vertices = nurbsCurve.controlPoints;
-				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, transparent: true } );
+				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, opacity: 0.25, transparent: true } );
 				var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
-				nurbsControlPointsLine.position.set( posX, posY, posZ );
-				nurbsControlPointsLine.rotation.set( rotX, rotY, rotZ );
-				nurbsControlPointsLine.scale.set( scaleX, scaleY, scaleZ );
-
-				parent.add( nurbsLine );
-				parent.add( nurbsControlPointsLine );
+				nurbsControlPointsLine.position.copy( nurbsLine.position );
+				group.add( nurbsControlPointsLine );
 
 				// NURBS surface
 
@@ -156,20 +154,16 @@
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
-				var materials = [
-					new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } ),
-					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
-				];
-
 				getSurfacePoint = function(u, v) {
 					return nurbsSurface.getPoint(u, v);
 				};
 
-				var geo = new THREE.ParametricGeometry( getSurfacePoint, 20, 20 );
-				var object = THREE.SceneUtils.createMultiMaterialObject( geo, materials );
-				object.position.set( 0, 100, 0 );
+				var geometry = new THREE.ParametricGeometry( getSurfacePoint, 20, 20 );
+				var material = new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } );
+				var object = new THREE.Mesh( geometry, material );
+				object.position.set( - 200, 100, 0 );
 				object.scale.multiplyScalar( 1 );
-				parent.add( object );
+				group.add( object );
 
 				//
 
@@ -283,7 +277,7 @@
 
 			function render() {
 
-				parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
+				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 				renderer.render( scene, camera );
 
 			}