Added FaceNormalsHelper in subdivicion example. Also some examples clean up.

examples/webgl_geometries.html

@@ -41,7 +41,7 @@
 
 				scene = new THREE.Scene();
 
-				var light, object, object2, materials;
+				var light, object, object2;
 
 				scene.add( new THREE.AmbientLight( 0x404040 ) );
 
@@ -53,74 +53,67 @@
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
-				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 } )
-				];
-
+				var material = new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } );
 
 				//
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.SphereGeometry( 75, 20, 10 ), materials );
+				object = new THREE.Mesh( new THREE.SphereGeometry( 75, 20, 10 ), material );
 				object.position.set( -400, 0, 200 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.IcosahedronGeometry( 75, 1 ), materials );
+				object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 1 ), material );
 				object.position.set( -200, 0, 200 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.OctahedronGeometry( 75, 2 ), materials );
+				object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 2 ), material );
 				object.position.set( 0, 0, 200 );
 				scene.add( object );
 
-
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TetrahedronGeometry( 75, 0 ), materials );
+				object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
 				object.position.set( 200, 0, 200 );
 				scene.add( object );
 
-
 				//
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 100, 100, 4, 4 ), materials );
+				object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 4, 4 ), material );
 				object.position.set( -400, 0, 0 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
+				object = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), material );
 				object.position.set( -200, 0, 0 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), materials );
+				object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
 				object.position.set( 0, 0, 0 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), materials );
+				object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
 				object.position.set( 200, 0, 0 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), materials );
+				object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
 				object.position.set( 400, 0, 0 );
 				scene.add( object );
 
-
 				//
 
 				var points = [];
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );
+					points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );
 
 				}
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.LatheGeometry( points, 20 ), materials );
+				object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );
 				object.position.set( -400, 0, -200 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TorusGeometry( 50, 20, 20, 20 ), materials );
+				object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material );
 				object.position.set( -200, 0, -200 );
 				scene.add( object );
 
-				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), materials );
+				object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material );
 				object.position.set( 0, 0, -200 );
 				scene.add( object );
 
@@ -132,6 +125,7 @@
 				object.position.set( 400, 0, -200 );
 				scene.add( object );
 
+				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgl_geometry_normals.html

@@ -16,6 +16,7 @@
 	<body>
 
 		<script src="../build/three.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 		<script src="fonts/helvetiker_regular.typeface.js"></script>
 
@@ -23,20 +24,10 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, controls, scene, renderer;
 
 			var cube, plane;
 
-			var targetYRotation = targetXRotation = 0;
-			var targetYRotationOnMouseDown = targetXRotationOnMouseDown = 0;
-
-			var mouseX = 0, mouseY = 0;
-			var mouseXOnMouseDown = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-
 			// Create new object by parameters
 
 			var createSomething = function( klass, args ) {
@@ -290,6 +281,8 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
+				controls = new THREE.OrbitControls( camera );
+
 				scene = new THREE.Scene();
 
 				var light = new THREE.PointLight( 0xffffff, 1.5 );
@@ -308,10 +301,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -320,9 +309,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -332,75 +318,12 @@
 
 			//
 
-			function onDocumentMouseDown( event ) {
-
-				//event.preventDefault();
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
-
-				mouseXOnMouseDown = event.clientX - windowHalfX;
-				mouseYOnMouseDown = event.clientY - windowHalfY;
-				targetYRotationOnMouseDown = targetYRotation;
-				targetXRotationOnMouseDown = targetXRotation;
-
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-				targetYRotation = targetYRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
-				targetXRotation = targetXRotationOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-			}
-
-			function onDocumentMouseOut( event ) {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-			}
-
-			function onDocumentTouchStart( event ) {
-
-				if ( event.touches.length == 1 ) {
-
-					event.preventDefault();
-
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotationOnMouseDown = targetRotation;
-
-				}
-			}
-
-			function onDocumentTouchMove( event ) {
-
-				if ( event.touches.length == 1 ) {
-
-					event.preventDefault();
-
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
-
-				}
-			}
-
-			//
-
 			function animate() {
 
 				requestAnimationFrame( animate );
 
+				controls.update();
+
 				render();
 				stats.update();
 
@@ -408,9 +331,6 @@
 
 			function render() {
 
-				group.rotation.x = ( targetXRotation) * 0.15;
-				group.rotation.y =  ( targetYRotation ) * 0.15;
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_subdivision.html

@@ -16,9 +16,8 @@
 	<body>
 
 		<script src="../build/three.min.js"></script>
-
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/modifiers/SubdivisionModifier.js"></script>
-
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="fonts/helvetiker_regular.typeface.js"></script>
@@ -27,20 +26,10 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, controls, scene, renderer;
 
 			var cube, plane;
 
-			var targetYRotation = targetXRotation = 0;
-			var targetYRotationOnMouseDown = targetXRotationOnMouseDown = 0;
-
-			var mouseX = 0, mouseY = 0;
-			var mouseXOnMouseDown = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-
 			// Create new object by parameters
 
 			var createSomething = function( klass, args ) {
@@ -251,11 +240,13 @@
 
 				}
 
-
 				group = new THREE.Object3D();
-				group.add( new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } ) ) );
 				scene.add( group );
 
+				var material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
+				var mesh = new THREE.Mesh( geometry, material )
+				group.add( mesh );
+				group.add( new THREE.FaceNormalsHelper( mesh ) );
 
 				var debugNewPoints = false;
 				var debugOldPoints = false;
@@ -348,6 +339,8 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
+				controls = new THREE.OrbitControls( camera );
+
 				scene = new THREE.Scene();
 
 				var light = new THREE.PointLight( 0xffffff, 1.5 );
@@ -366,10 +359,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -378,9 +367,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -390,75 +376,12 @@
 
 			//
 
-			function onDocumentMouseDown( event ) {
-
-				//event.preventDefault();
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
-
-				mouseXOnMouseDown = event.clientX - windowHalfX;
-				mouseYOnMouseDown = event.clientY - windowHalfY;
-				targetYRotationOnMouseDown = targetYRotation;
-				targetXRotationOnMouseDown = targetXRotation;
-
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-				targetYRotation = targetYRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
-				targetXRotation = targetXRotationOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-			}
-
-			function onDocumentMouseOut( event ) {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-			}
-
-			function onDocumentTouchStart( event ) {
-
-				if ( event.touches.length == 1 ) {
-
-					event.preventDefault();
-
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotationOnMouseDown = targetRotation;
-
-				}
-			}
-
-			function onDocumentTouchMove( event ) {
-
-				if ( event.touches.length == 1 ) {
-
-					event.preventDefault();
-
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
-
-				}
-			}
-
-			//
-
 			function animate() {
 
 				requestAnimationFrame( animate );
 
+				controls.update();
+
 				render();
 				stats.update();
 
@@ -466,9 +389,6 @@
 
 			function render() {
 
-				group.rotation.x = cube.rotation.x += ( targetXRotation - cube.rotation.x ) * 0.05;
-				group.rotation.y = cube.rotation.y += ( targetYRotation - cube.rotation.y ) * 0.05;
-
 				renderer.render( scene, camera );
 
 			}