Merge pull request #11853 from Mugen87/dev

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,334 +1,334 @@
 <!DOCTYPE html>
 <html lang='en'>
-
 <head>
-    <title>three.js webgl - loaders - X-File loader</title>
-    <meta charset='utf-8'>
-    <meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
-
-    <style>
-        body {
-            font-family: Monospace;
-            background-color: #000;
-            color: #fff;
-            margin: 0px;
-            overflow: hidden;
-        }
-
-        #info {
-            color: #fff;
-            position: absolute;
-            top: 10px;
-            width: 100%;
-            text-align: center;
-            z-index: -1;
-            display: block;
-        }
-
-        #info a,
-        .button {
-            color: #f00;
-            font-weight: bold;
-            text-decoration: underline;
-            cursor: pointer;
-        }
-    </style>
+		<title>three.js webgl - loaders - X-File loader</title>
+		<meta charset='utf-8'>
+		<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
+
+		<style>
+				body {
+						font-family: Monospace;
+						background-color: #000;
+						color: #fff;
+						margin: 0px;
+						overflow: hidden;
+				}
+
+				#info {
+						color: #fff;
+						position: absolute;
+						top: 10px;
+						width: 100%;
+						text-align: center;
+						z-index: -1;
+						display: block;
+				}
+
+				#info a,
+				.button {
+						color: #f00;
+						font-weight: bold;
+						text-decoration: underline;
+						cursor: pointer;
+				}
+		</style>
 </head>
-
 <body>
 
-    <div id='info'>
-        <a href='http://threejs.org' target='_blank'>three.js</a> - X-File Loader test<br />
-    </div>
+		<div id='info'>
+				<a href='http://threejs.org' target='_blank'>three.js</a> - X-File Loader test<br />
+		</div>
+
+		<script src='../build/three.js'></script>
+		<script src='js/controls/OrbitControls.js'></script>
+
+		<script src='js/loaders/XLoader.js'></script>
+
+		<script src='js/Detector.js'></script>
+		<script src='js/libs/stats.min.js'></script>
+		<script src='js/libs/dat.gui.min.js'></script>
+		<script>
+
+				if (!Detector.webgl) Detector.addGetWebGLMessage();
+
+				var container, stats, controls;
+				var camera, scene, renderer;
+				var clock = new THREE.Clock();
+				var gui = new dat.GUI();
+				var mixers = [];
+				var manager = null;
+				var Texloader = null;
+				var ParentList = null;
+				var skeletonHelper = null;
+				var Models = [];
+				var animateInf = null;
+				var DashAnime = null;
+				var d = new Date();
+				var LastDateTime = null;
+				var animates = [];
+				var actions = [];
+				init();
+
+				function init() {
+
+						LastDateTime = Date.now();
+						container = document.createElement('div');
+						document.body.appendChild(container);
+						container.style.zIndex = -10;
+						camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
+						scene = new THREE.Scene();
+						scene.background = new THREE.Color(0x666666);
+						scene.add(new THREE.AmbientLight(0x999999));
+						// grid
+						var gridHelper = new THREE.GridHelper(14, 1, 0x303030, 0x303030);
+						gridHelper.position.set(0, -0.04, 0);
+						scene.add(gridHelper);
+						// stats
+						stats = new Stats();
+						container.appendChild(stats.dom);
+						// model
+						manager = new THREE.LoadingManager();
+						manager.onProgress = function (item, loaded, total) {
+
+								console.log(item, loaded, total);
+
+						};
+
+						var onProgress = function (xhr) {
+
+								if (xhr.lengthComputable) {
+
+										var percentComplete = xhr.loaded / xhr.total * 100;
+										console.log(Math.round(percentComplete, 2) + '% downloaded');
+
+								}
+
+						};
+
+						var onError = function (xhr) {
+
+								console.log('Errror Loading!');
+
+						};
+
+						Texloader = new THREE.TextureLoader();
+						var loader = new THREE.XLoader(manager, Texloader);
+
+						// ! If [ Texture ] was reversed Y axis, enable the following.
+						// THREE.XLoader.IsUvYReverse = false;
+
+				// ! 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) {
+
+								for (var i = 0; i < object.FrameInfo.length; i++) {
+
+										Models.push(object.FrameInfo[i]);
+										scene.add(Models[i]);
+
+										if (Models[i] instanceof THREE.SkinnedMesh) {
+
+												skeletonHelper = new THREE.SkeletonHelper(Models[i]);
+												scene.add(skeletonHelper);
+
+												if (object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0) {
+
+														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);
+
+													 var action = Models[i].mixer.clipAction(Models[i].geometry.animations[0]);
+													 action.play();
+													 */
+
+														// ↓ 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));
+																Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'walk', 50 * object.XAnimationObj[0].fps, 80 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
+																Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dash', 140 * object.XAnimationObj[0].fps, 160 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
+																Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dashing', 160 * object.XAnimationObj[0].fps, 165 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
+																Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'damage', 500 * object.XAnimationObj[0].fps, 530 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
 
-    <script src='../build/three.js'></script>
-    <script src='js/controls/OrbitControls.js'></script>
+																Models[i].mixer = new THREE.AnimationMixer(Models[i]);
+																animates.push(Models[i].mixer);
 
-    <script src='js/loaders/XLoader.js'></script>
+																var stand = Models[i].mixer.clipAction('stand');
+																// stand.play();
+																stand.setLoop(THREE.LoopRepeat);
+																actions['stand'] = stand;
 
-    <script src='js/Detector.js'></script>
-    <script src='js/libs/stats.min.js'></script>
-    <script src='js/libs/dat.gui.min.js'></script>
-    <script>
+																var walk = Models[i].mixer.clipAction('walk');
+																walk.setLoop(THREE.LoopRepeat);
+																walk.play();
+																actions['walk'] = walk;
 
-        if (!Detector.webgl) Detector.addGetWebGLMessage();
-
-        var container, stats, controls;
-        var camera, scene, renderer;
-        var clock = new THREE.Clock();
-        var gui = new dat.GUI();
-        var mixers = [];
-        var manager = null;
-        var Texloader = null;
-        var ParentList = null;
-        var skeletonHelper = null;
-        var Models = [];
-        var animateInf = null;
-        var DashAnime = null;
-        var d = new Date();
-        var LastDateTime = null;
-        var animates = [];
-        var actions = [];
-        init();
+																var dash = Models[i].mixer.clipAction('dash');
+																dash.setLoop(THREE.LoopOnce);
+																//dash.play();
+																actions['dash'] = dash;
 
-        function init() {
-
-            LastDateTime = Date.now();
-            container = document.createElement('div');
-            document.body.appendChild(container);
-            container.style.zIndex = -10;
-            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x666666);
-            scene.add(new THREE.AmbientLight(0x999999));
-            // grid
-            var gridHelper = new THREE.GridHelper(14, 1, 0x303030, 0x303030);
-            gridHelper.position.set(0, -0.04, 0);
-            scene.add(gridHelper);
-            // stats
-            stats = new Stats();
-            container.appendChild(stats.dom);
-            // model
-            manager = new THREE.LoadingManager();
-            manager.onProgress = function (item, loaded, total) {
-
-                console.log(item, loaded, total);
-
-            };
-
-            var onProgress = function (xhr) {
-
-                if (xhr.lengthComputable) {
-
-                    var percentComplete = xhr.loaded / xhr.total * 100;
-                    console.log(Math.round(percentComplete, 2) + '% downloaded');
-
-                }
-
-            };
-
-            var onError = function (xhr) {
-
-                console.log('Errror Loading!');
-
-            };
-
-            Texloader = new THREE.TextureLoader();
-            var loader = new THREE.XLoader(manager, Texloader);
-
-            // ! If [ Texture ] was reversed Y axis, enable the following. 
-            // THREE.XLoader.IsUvYReverse = false;
-            
-		    // ! 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) {
-
-                for (var i = 0; i < object.FrameInfo.length; i++) {
-
-                    Models.push(object.FrameInfo[i]);
-                    scene.add(Models[i]);
-
-                    if (Models[i] instanceof THREE.SkinnedMesh) {
-
-                        skeletonHelper = new THREE.SkeletonHelper(Models[i]);
-                        scene.add(skeletonHelper);
-
-                        if (object.XAnimationObj !== undefined && object.XAnimationObj.length !== 0) {
-
-                            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);
-
-                           var action = Models[i].mixer.clipAction(Models[i].geometry.animations[0]);
-                           action.play();
-                           */
-
-                            // ↓ 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));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'walk', 50 * object.XAnimationObj[0].fps, 80 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dash', 140 * object.XAnimationObj[0].fps, 160 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'dashing', 160 * object.XAnimationObj[0].fps, 165 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
-                                Models[i].geometry.animations.push(THREE.AnimationClip.parseAnimation(splitAnimation(object.XAnimationObj[0], 'damage', 500 * object.XAnimationObj[0].fps, 530 * object.XAnimationObj[0].fps), Models[i].skeleton.bones));
+																var dashing = Models[i].mixer.clipAction('dashing');
+																dashing.setLoop(THREE.LoopPingPong);
+																// dashing.play();
+																actions['dashing'] = dashing;
 
-                                Models[i].mixer = new THREE.AnimationMixer(Models[i]);
-                                animates.push(Models[i].mixer);
+																var damage = Models[i].mixer.clipAction('damage');
+																damage.setLoop(THREE.LoopRepeat);
+																//damage.play();
+																actions['damage'] = damage;
 
-                                var stand = Models[i].mixer.clipAction('stand');
-                                // stand.play();
-                                stand.setLoop(THREE.LoopRepeat);
-                                actions['stand'] = stand;
+																var ActionKeys = Object.keys(actions);
+																var dmy = {};
+																dmy.gui = '';
+																dmy.action = '';
+																gui.add(dmy, 'action', ActionKeys).onChange(function (v) {
+																		animates[0].stopAllAction();
+																		actions[v].play();
+																});
 
-                                var walk = Models[i].mixer.clipAction('walk');
-                                walk.setLoop(THREE.LoopRepeat);
-                                walk.play();
-                                actions['walk'] = walk;
+														}
+														///////////
+												}
 
-                                var dash = Models[i].mixer.clipAction('dash');
-                                dash.setLoop(THREE.LoopOnce);
-                                //dash.play();
-                                actions['dash'] = dash;
+										}
 
-                                var dashing = Models[i].mixer.clipAction('dashing');
-                                dashing.setLoop(THREE.LoopPingPong);
-                                // dashing.play();
-                                actions['dashing'] = dashing;
+								}
 
-                                var damage = Models[i].mixer.clipAction('damage');
-                                damage.setLoop(THREE.LoopRepeat);
-                                //damage.play();
-                                actions['damage'] = damage;
+								object = null;
+						}, onProgress, onError);
 
-                                var ActionKeys = Object.keys(actions);
-                                var dmy = {};
-                                dmy.gui = '';
-                                dmy.action = '';
-                                gui.add(dmy, 'action', ActionKeys).onChange(function (v) {
-                                    animates[0].stopAllAction();
-                                    actions[v].play();
-                                });
 
-                            }
-                            ///////////
-                        }
+						renderer = new THREE.WebGLRenderer();
+						renderer.setPixelRatio(window.devicePixelRatio);
+						renderer.setSize(window.innerWidth, window.innerHeight);
+						container.appendChild(renderer.domElement);
 
-                    }
-                    
-                }
+						camera.position.set(2, 18, 28);
+						camera.up.set(0, 1, 0);
 
-                object = null;
-            }, onProgress, onError);
+						controls = new THREE.OrbitControls(camera, renderer.domElement);
+						controls.target.set(0, 12, 0);
+						controls.update();
 
+						var light = new THREE.DirectionalLight(0xeeeeff, 2);
+						light.position.set(10, 100, 1).normalize();
+						scene.add(light);
 
-            renderer = new THREE.WebGLRenderer();
-            renderer.setPixelRatio(window.devicePixelRatio);
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            container.appendChild(renderer.domElement);
+						light = new THREE.DirectionalLight(0x555588);
+						light.position.set(-1, -1, -1).normalize();
+						scene.add(light);
 
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.target.set(0, 12, 0);
-            camera.position.set(2, 18, 28);
-            camera.up.set(0, 1, 0);
 
-            var light = new THREE.DirectionalLight(0xeeeeff, 2);
-            light.position.set(10, 100, 1).normalize();
-            scene.add(light);
+						window.addEventListener('resize', onWindowResize, false);
+						animate();
 
-            light = new THREE.DirectionalLight(0x555588);
-            light.position.set(-1, -1, -1).normalize();
-            scene.add(light);
+				}
 
-            controls.update();
-            window.addEventListener('resize', onWindowResize, false);
-            animate();
+				function onWindowResize() {
 
-        }
+						camera.aspect = window.innerWidth / window.innerHeight;
+						camera.updateProjectionMatrix();
+						renderer.setSize(window.innerWidth, window.innerHeight);
 
-        function onWindowResize() {
+				}
+				//
+				function animate() {
 
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
+						requestAnimationFrame(animate);
+						var nowTime = Date.now();
+						var dulTime = nowTime - LastDateTime;
+						LastDateTime = nowTime;
 
-        }
-        //
-        function animate() {
+						if (animates != null && animates.length > 0) {
 
-            requestAnimationFrame(animate);
-            var nowTime = Date.now();
-            var dulTime = nowTime - LastDateTime;
-            LastDateTime = nowTime;
+								for (var i = 0; i < animates.length; i++) {
 
-            if (animates != null && animates.length > 0) {
+										animates[i].update(dulTime);
 
-                for (var i = 0; i < animates.length; i++) {
+								}
 
-                    animates[i].update(dulTime);
+						}
 
-                }
+						stats.update();
+						render();
 
-            }
+				}
 
-            stats.update();
-            render();
+				function render() {
 
-        }
+						renderer.render(scene, camera);
 
-        function render() {
-            
-            renderer.render(scene, camera);
+				}
 
-        }
+				/////////////////
+				/// this is not must mount codes.
+				// split	One and Long Animation, for time
+				function splitAnimation(_baseAnime, _name, _beginTime, _endTime) {
 
-        /////////////////
-        /// this is not must mount codes.
-        // split  One and Long Animation, for time
-        function splitAnimation(_baseAnime, _name, _beginTime, _endTime) {
+						var Animation = {};
+						Animation.fps = _baseAnime.fps;
+						Animation.name = _name;
+						Animation.length = _endTime - _beginTime;
+						Animation.hierarchy = [];
 
-            var Animation = {};
-            Animation.fps = _baseAnime.fps;
-            Animation.name = _name;
-            Animation.length = _endTime - _beginTime;
-            Animation.hierarchy = [];
+						for (var i = 0; i < _baseAnime.hierarchy.length; i++) {
 
-            for (var i = 0; i < _baseAnime.hierarchy.length; i++) {
+								var firstKey = -1;
+								var lastKey = -1;
+								var frame = {};
+								frame.name = _baseAnime.hierarchy[i].name;
+								frame.parent = _baseAnime.hierarchy[i].parent;
+								frame.keys = [];
 
-                var firstKey = -1;
-                var lastKey = -1;
-                var frame = {};
-                frame.name = _baseAnime.hierarchy[i].name;
-                frame.parent = _baseAnime.hierarchy[i].parent;
-                frame.keys = [];
+								for (var m = 1; m < _baseAnime.hierarchy[i].keys.length; m++) {
 
-                for (var m = 1; m < _baseAnime.hierarchy[i].keys.length; m++) {
+										if (_baseAnime.hierarchy[i].keys[m].time > _beginTime) {
 
-                    if (_baseAnime.hierarchy[i].keys[m].time > _beginTime) {
+												if (firstKey === -1) {
 
-                        if (firstKey === -1) {
+														firstKey = m - 1;
+														frame.keys.push(_baseAnime.hierarchy[i].keys[m - 1]);
 
-                            firstKey = m - 1;
-                            frame.keys.push(_baseAnime.hierarchy[i].keys[m - 1]);
-                            
-                        }
+												}
 
-                        frame.keys.push(_baseAnime.hierarchy[i].keys[m]);
+												frame.keys.push(_baseAnime.hierarchy[i].keys[m]);
 
-                    }
+										}
 
-                    if (_endTime <= _baseAnime.hierarchy[i].keys[m].time || m >= _baseAnime.hierarchy[i].keys.length - 1) {
+										if (_endTime <= _baseAnime.hierarchy[i].keys[m].time || m >= _baseAnime.hierarchy[i].keys.length - 1) {
 
-                        break;
-                    }
+												break;
+										}
 
-                }
+								}
 
-                for (var m = 0; m < frame.keys.length; m++) {
+								for (var m = 0; m < frame.keys.length; m++) {
 
-                    frame.keys[m].time -= _beginTime;
+										frame.keys[m].time -= _beginTime;
 
-                }
+								}
 
-                Animation.hierarchy.push(frame);
+								Animation.hierarchy.push(frame);
 
-            }
+						}
 
-            return Animation;
+						return Animation;
 
-        }
-    </script>
+				}
+		</script>
 
 </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 );