Simplified webgl_materials_modified example.

examples/webgl_materials_modified.html

@@ -44,6 +44,7 @@
 		</div>
 
 		<script src="../build/three.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -53,17 +54,9 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var camera, scene, renderer, stats;
+			var controls;
 
-			var mesh, materialShader;
-
-			var mouseX = 0;
-			var mouseY = 0;
-
-			var targetX = 0;
-			var targetY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			var materialShader;
 
 			init();
 			animate();
@@ -71,7 +64,7 @@
 			function init() {
 
 				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 1200;
+				camera.position.z = 1500;
 
 				scene = new THREE.Scene();
 
@@ -102,7 +95,7 @@
 				var loader = new THREE.JSONLoader();
 				loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function( geometry ) {
 
-					mesh = new THREE.Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.y = - 50;
 					mesh.scale.setScalar( 100 );
 					scene.add( mesh );
@@ -114,6 +107,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+
 				//
 
 				stats = new Stats();
@@ -121,7 +116,6 @@
 
 				// EVENTS
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -133,9 +127,6 @@
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				windowHalfX = width / 2;
-				windowHalfY = height / 2;
-
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
 
@@ -143,13 +134,6 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
-
-				mouseX = ( event.clientX - windowHalfX );
-				mouseY = ( event.clientY - windowHalfY );
-
-			}
-
 			//
 
 			function animate() {
@@ -164,16 +148,6 @@
 
 			function render() {
 
-				targetX = mouseX * .001;
-				targetY = mouseY * .001;
-
-				if ( mesh ) {
-
-					mesh.rotation.y += 0.05 * ( targetX - mesh.rotation.y );
-					mesh.rotation.x += 0.05 * ( targetY - mesh.rotation.x );
-
-				}
-
 				if ( materialShader ) {
 
 					materialShader.uniforms.time.value = performance.now() / 1000;