Examples: Clean up orbit controls

examples/webgl_buffergeometry_drawcalls.html

@@ -43,7 +43,7 @@
 		<script>
 
 			var group;
-			var container, controls, stats;
+			var container, stats;
 			var particlesData = [];
 			var camera, scene, renderer;
 			var positions, colors;
@@ -98,7 +98,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 				camera.position.z = 1750;
 
-				controls = new THREE.OrbitControls( camera, container );
+				var controls = new THREE.OrbitControls( camera, container );
 
 				scene = new THREE.Scene();
 

examples/webgl_decals.html

@@ -54,7 +54,6 @@
 			point: new THREE.Vector3(),
 			normal: new THREE.Vector3()
 		};
-		var controls;
 		var mouse = new THREE.Vector2();
 
 		var textureLoader = new THREE.TextureLoader();
@@ -111,7 +110,7 @@
 			camera.position.z = 120;
 			camera.target = new THREE.Vector3();
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 			controls.minDistance = 50;
 			controls.maxDistance = 200;
 

examples/webgl_depth_texture.html

@@ -99,7 +99,7 @@
 
 		<script>
 
-			var camera, scene, renderer, controls, stats;
+			var camera, scene, renderer, stats;
 			var target;
 			var postScene, postCamera;
 			var supportsExtension = true;
@@ -130,7 +130,7 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 				camera.position.z = -4;
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.25;
 				controls.rotateSpeed = 0.35;
@@ -227,7 +227,6 @@
 				if ( !supportsExtension ) return;
 
 				requestAnimationFrame( animate );
-				controls.update();
 
 				// render scene into target
 				renderer.render( scene, camera, target );

examples/webgl_geometry_extrude_splines.html

@@ -233,7 +233,7 @@
 
 			// controls
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 			// event listener
 

examples/webgl_geometry_normals.html

@@ -47,7 +47,7 @@
 		<script>
 
 			var container, stats, gui;
-			var camera, controls, scene, renderer;
+			var camera, scene, renderer;
 			var mesh, geometry;
 
 			var geometries = [
@@ -150,7 +150,7 @@
 
 				//
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_geometry_teapot.html

@@ -110,7 +110,6 @@
 
 				// CONTROLS
 				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
-				cameraControls.target.set( 0, 0, 0 );
 				cameraControls.addEventListener( 'change', render );
 
 				// TEXTURE MAP

examples/webgl_geometry_terrain_raycast.html

@@ -243,7 +243,7 @@
 
 			function render() {
 
-				controls.update( clock.getDelta() );
+				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_text_shapes.html

@@ -29,7 +29,7 @@
 
 		<script>
 
-			var camera, scene, renderer, controls;
+			var camera, scene, renderer;
 
 			init();
 			animate();
@@ -39,8 +39,9 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, - 400, 600 );
 
-				controls = new THREE.OrbitControls( camera );
+				var controls = new THREE.OrbitControls( camera );
 				controls.target.set( 0, 0, 0 );
+				controls.update();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
@@ -156,7 +157,6 @@
 
 			function render() {
 
-				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_lights_physical.html

@@ -240,8 +240,6 @@
 
 
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_loader_ctm_materials.html

@@ -284,8 +284,6 @@
 
 			function render() {
 
-				controls.update();
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_loader_md2.html

@@ -157,6 +157,7 @@
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 50, 0 );
+				controls.update();
 
 				// GUI
 
@@ -340,7 +341,6 @@
 
 				var delta = clock.getDelta();
 
-				controls.update();
 				character.update( delta );
 
 				renderer.render( scene, camera );

examples/webgl_loader_md2_control.html

@@ -165,6 +165,7 @@
 
 				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
 				cameraControls.target.set( 0, 50, 0 );
+				cameraControls.update();
 
 				// CHARACTER
 
@@ -331,8 +332,6 @@
 
 				var delta = clock.getDelta();
 
-				cameraControls.update( delta );
-
 				for ( var i = 0; i < nCharacters; i ++ ) {
 
 					characters[ i ].update( delta );

examples/webgl_loader_mmd.html

@@ -156,7 +156,6 @@
 				}, onProgress, onError );
 
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_loader_vrml.html

@@ -108,15 +108,12 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				controls.handleResize();
-
 			}
 
 			function animate() {
 
 				requestAnimationFrame( animate );
 
-				controls.update();
 				renderer.render( scene, camera );
 
 				stats.update();

examples/webgl_loader_x.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang='en'>
-
 <head>
     <title>three.js webgl - loaders - X-File loader</title>
     <meta charset='utf-8'>
@@ -34,7 +33,6 @@
         }
     </style>
 </head>
-
 <body>
 
     <div id='info'>
@@ -116,12 +114,12 @@
             Texloader = new THREE.TextureLoader();
             var loader = new THREE.XLoader(manager, Texloader);
 
-            // ! If [ Texture ] was reversed Y axis, enable the following. 
+            // ! If [ Texture ] was reversed Y axis, enable the following.
             // THREE.XLoader.IsUvYReverse = false;
-            
-		    // ! And if [ Model ] was reversed polygons, enable the following. 
+
+		    // ! And if [ Model ] was reversed polygons, enable the following.
             // loader.load([' your model url ', true ], function (object) {
-            
+
             // read (download) model file
             loader.load(['models/xfile/SSR06_Born2.x', false], function (object) {
 
@@ -139,14 +137,14 @@
 
                             Models[i].geometry.animations = [];
 
-                            /* 
+                            /*
                             *  ↓ that is BASIC animation data code.
                             *  Usually, please use this.
                             *  Because of the data I have, I use a different code
-                            * 
+                            *
                            for (var a = 0; a < object.XAnimationObj.length; a++) {
                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(object.XAnimationObj[a], Models[i].skeleton.bones));
-                           } 
+                           }
                            Models[i].mixer = new THREE.AnimationMixer(Models[i]);
                            animates.push(Models[i].mixer);
 
@@ -154,7 +152,7 @@
                            action.play();
                            */
 
-                            // ↓ that is a code for [ All animation-keyframes are connected data ]. output from 'LightWave3D' 
+                            // ↓ that is a code for [ All animation-keyframes are connected data ]. output from 'LightWave3D'
                             {
 
                                 Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'stand', 10 * object.XAnimationObj[0].fps, 11 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
@@ -205,7 +203,7 @@
                         }
 
                     }
-                    
+
                 }
 
                 object = null;
@@ -219,6 +217,8 @@
 
             controls = new THREE.OrbitControls(camera, renderer.domElement);
             controls.target.set(0, 12, 0);
+						controls.update();
+
             camera.position.set(2, 18, 28);
             camera.up.set(0, 1, 0);
 
@@ -230,7 +230,7 @@
             light.position.set(-1, -1, -1).normalize();
             scene.add(light);
 
-            controls.update();
+
             window.addEventListener('resize', onWindowResize, false);
             animate();
 
@@ -267,7 +267,7 @@
         }
 
         function render() {
-            
+
             renderer.render(scene, camera);
 
         }
@@ -300,7 +300,7 @@
 
                             firstKey = m - 1;
                             frame.keys.push(_baseAnime.hierarchy[i].keys[m - 1]);
-                            
+
                         }
 
                         frame.keys.push(_baseAnime.hierarchy[i].keys[m]);
@@ -331,4 +331,4 @@
 
 </body>
 
-</html>
+</html>

examples/webgl_marchingcubes.html

@@ -564,8 +564,6 @@
 
 			time += delta * effectController.speed * 0.5;
 
-			controls.update( delta );
-
 			// marching cubes
 
 			if ( effectController.resolution !== resolution ) {

examples/webgl_materials_channels.html

@@ -256,9 +256,6 @@
 
 				requestAnimationFrame( animate );
 
-				controlsOrtho.update();
-				controlsPerspective.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_displacementmap.html

@@ -273,8 +273,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_materials_envmaps.html

@@ -208,8 +208,6 @@
 
 				render();
 
-				controls.update();
-
 			}
 
 			function render() {

examples/webgl_materials_envmaps_hdr.html

@@ -208,8 +208,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -284,11 +282,11 @@
 						case 'front': side = THREE.FrontSide; break;
 						case 'back': side = THREE.BackSide; break;
 						case 'double': side = THREE.DoubleSide; break;
-	
+
 					}
 
 					if( standardMaterial.side !== side ) {
-						
+
 						standardMaterial.side = side;
 						standardMaterial.needsUpdate = true;
 

examples/webgl_materials_reflectivity.html

@@ -202,8 +202,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_transparency.html

@@ -154,8 +154,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_basic.html

@@ -177,8 +177,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_lambert.html

@@ -177,8 +177,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_phong.html

@@ -183,8 +183,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_physical.html

@@ -83,7 +83,7 @@
 
 				scene = new THREE.Scene();
 				scene.background = textureCube;
-				
+
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				var hdrCubeRenderTarget = null;
 
@@ -96,7 +96,7 @@
 					pmremCubeUVPacker.update( renderer );
 
 					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
-					 
+
 					// Materials
 
 					var cubeWidth = 400;
@@ -205,8 +205,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_standard.html

@@ -80,7 +80,7 @@
 
 				scene = new THREE.Scene();
 				scene.background = textureCube;
-				
+
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 				var hdrCubeRenderTarget = null;
 
@@ -109,7 +109,7 @@
 					var numberOfSphersPerSide = 5;
 					var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 					var stepSize = 1.0 / numberOfSphersPerSide;
-					
+
 					var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
 					var index = 0;
@@ -130,7 +130,7 @@
 									color: diffuseColor,
 									metalness: beta,
 									roughness: 1.0 - alpha,
-									envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture						
+									envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture
 								} );
 
 								index ++;
@@ -144,9 +144,9 @@
 								scene.add( mesh );
 
 							}
-							
+
 						}
-						
+
 						index ++;
 
 					}
@@ -212,8 +212,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_materials_variations_toon.html

@@ -187,8 +187,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_mirror.html

@@ -195,8 +195,6 @@
 				smallSphere.rotation.y = ( Math.PI / 2 ) - timer * 0.1;
 				smallSphere.rotation.z = timer * 0.8;
 
-				cameraControls.update();
-
 				renderer.render(scene, camera);
 
 			}

examples/webgl_mirror_nodes.html

@@ -306,8 +306,6 @@
 
 				groundMirrorMaterial.updateFrame( delta );
 
-				cameraControls.update();
-
 				render();
 			}
 

examples/webgl_modifier_simplifier.html

@@ -154,16 +154,14 @@
 
 			function animate() {
 
-				meshes.forEach( m => {
+				meshes.forEach( function( m ) {
 					m.rotation.x += 0.01;
 					m.rotation.y += 0.01;
 					m.rotation.z += 0.01;
-				})
+				} );
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_modifier_subdivision.html

@@ -303,8 +303,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				stats.begin();
 				render();
 				stats.end();

examples/webgl_morphtargets_human.html

@@ -122,6 +122,7 @@
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 3000, 0 );
+				controls.update();
 
 				controls.addEventListener( 'change', render );
 
@@ -211,8 +212,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				render();
 
 			}

examples/webgl_panorama_cube.html

@@ -130,8 +130,6 @@
 
 		function animate() {
 
-			controls.update();
-
 			renderer.render( scene, camera );
 
 			requestAnimationFrame( animate );

examples/webgl_physics_cloth.html

@@ -93,12 +93,11 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				camera.position.x = -12;
-				camera.position.y = 7;
-				camera.position.z =  4;
+				camera.position.set( -12, 7, 4 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.y = 2;
+				controls.target.set( 0, 2, 0 );
+				controls.update();
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -402,8 +401,6 @@
 
 				updatePhysics( deltaTime );
 
-				controls.update( deltaTime );
-
 				renderer.render( scene, camera );
 
 				time += deltaTime;

examples/webgl_physics_convex_break.html

@@ -120,12 +120,11 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfd1e5 );
 
-			camera.position.x = -14;
-			camera.position.y = 8;
-			camera.position.z =  16;
+			camera.position.set( -14, 8, 16 );
 
 			controls = new THREE.OrbitControls( camera );
-			controls.target.y = 2;
+			controls.target.set( 0, 2, 0 );
+			controls.update();
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
@@ -430,8 +429,6 @@
 
 			updatePhysics( deltaTime );
 
-			controls.update( deltaTime );
-
 			renderer.render( scene, camera );
 
 			time += deltaTime;

examples/webgl_physics_rope.html

@@ -100,12 +100,11 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfd1e5 );
 
-			camera.position.x = -7;
-			camera.position.y = 5;
-			camera.position.z =  8;
+			camera.position.set( -7, 5, 8 );
 
 			controls = new THREE.OrbitControls( camera );
-			controls.target.y = 2;
+			controls.target.set( 0, 2, 0 );
+			controls.update();
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
@@ -425,8 +424,6 @@
 
 			updatePhysics( deltaTime );
 
-			controls.update( deltaTime );
-
 			renderer.render( scene, camera );
 
 			time += deltaTime;

examples/webgl_physics_terrain.html

@@ -403,8 +403,6 @@
 
 						updatePhysics( deltaTime );
 
-						controls.update( deltaTime );
-
 						renderer.render( scene, camera );
 
 						time += deltaTime;

examples/webgl_physics_volume.html

@@ -98,12 +98,11 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				camera.position.x = -7;
-				camera.position.y = 5;
-				camera.position.z =  8;
+				camera.position.set( -7, 5, 8 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.y = 2;
+				controls.target.set( 0, 2, 0 );
+				controls.update();
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -133,7 +132,7 @@
 				scene.add( light );
 
 
-				container.innerHTML = "";
+				container.innerHTML = '';
 
 				container.appendChild( renderer.domElement );
 
@@ -474,8 +473,6 @@
 
 				processClick();
 
-				controls.update( deltaTime );
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_postprocessing_backgrounds.html

@@ -213,8 +213,6 @@
 				composer.addPass( copyPass );
 
 				var controls = new THREE.OrbitControls( cameraP, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_postprocessing_outline.html

@@ -387,7 +387,6 @@
 				renderer.setClearAlpha( 0.0 );
 
 				composer.render();
-				controls.update();
 				stats.end();
 			}
 

examples/webgl_postprocessing_unreal_bloom.html

@@ -184,8 +184,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_shaders_ocean.html

@@ -95,6 +95,7 @@
 				controls.maxDistance = 5000.0;
 				controls.maxPolarAngle = Math.PI * 0.495;
 				controls.target.set( 0, 500, 0 );
+				controls.update();
 
 				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
@@ -240,7 +241,6 @@
 				sphere.rotation.z = time * 0.51;
 
 				water.material.uniforms.time.value += 1.0 / 60.0;
-				controls.update();
 				water.render();
 				renderer.render( scene, camera );
 

examples/webgl_shaders_ocean2.html

@@ -183,7 +183,6 @@
 					this.ms_Ocean.materialOcean.uniforms.u_cameraPosition.value = this.ms_Camera.position;
 					this.ms_Ocean.materialOcean.depthTest = true;
 					//this.ms_Scene.__lights[1].position.x = this.ms_Scene.__lights[1].position.x + 0.01;
-					this.ms_Controls.update();
 					this.Display();
 				},
 

examples/webgl_shaders_vector.html

@@ -110,6 +110,7 @@
 
 				controls = new THREE.OrbitControls( camera );
 				controls.target.set( 0, 100, 0 );
+				controls.update();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
@@ -361,7 +362,6 @@
 
 			function render() {
 
-				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_simple_gi.html

@@ -245,8 +245,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_skinning_simple.html

@@ -88,8 +88,6 @@
 
 				if ( mixer ) mixer.update( clock.getDelta() );
 
-				controls.update();
-
 				render();
 				stats.update();
 

examples/webgl_terrain_dynamic.html

@@ -257,7 +257,6 @@
 				camera.position.set( -1200, 800, 1200 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 0, 0 );
 
 				controls.rotateSpeed = 1.0;
 				controls.zoomSpeed = 1.2;
@@ -467,8 +466,6 @@
 
 				if ( terrain.visible ) {
 
-					controls.update();
-
 					var time = Date.now() * 0.001;
 
 					var fLow = 0.1, fHigh = 0.8;

examples/webgl_tonemapping.html

@@ -208,8 +208,6 @@
 				container.appendChild( stats.dom );
 
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0, 0 );
-				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize, false );