Merge pull request #20503 from Mugen87/dev51

Examples: More clean up.

Author: Mugen87

examples/webgl_animation_cloth.html

@@ -37,56 +37,55 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
-			var scene, camera, dirLight, stats;
-			var renderer, mixer, controls;
+			let mixer;
 
-			var clock = new THREE.Clock();
-			var container = document.getElementById( 'container' );
+			const clock = new THREE.Clock();
+			const container = document.getElementById( 'container' );
 
-			stats = new Stats();
+			const stats = new Stats();
 			container.appendChild( stats.dom );
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.outputEncoding = THREE.sRGBEncoding;
 			container.appendChild( renderer.domElement );
 
-			scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfe3dd );
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			camera.position.set( 5, 2, 8 );
 
-			controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.target.set( 0, 0.5, 0 );
 			controls.update();
 			controls.enablePan = false;
 			controls.enableDamping = true;
 
 			scene.add( new THREE.HemisphereLight( 0xffffff, 0x000000, 0.4 ) );
 
-			dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+			const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 			dirLight.position.set( 5, 2, 8 );
 			scene.add( dirLight );
 
 			// envmap
-			var path = 'textures/cube/Park2/';
-			var format = '.jpg';
-			var envMap = new THREE.CubeTextureLoader().load( [
+			const path = 'textures/cube/Park2/';
+			const format = '.jpg';
+			const envMap = new THREE.CubeTextureLoader().load( [
 				path + 'posx' + format, path + 'negx' + format,
 				path + 'posy' + format, path + 'negy' + format,
 				path + 'posz' + format, path + 'negz' + format
 			] );
 
-			var dracoLoader = new DRACOLoader();
+			const dracoLoader = new DRACOLoader();
 			dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
-			var loader = new GLTFLoader();
+			const loader = new GLTFLoader();
 			loader.setDRACOLoader( dracoLoader );
 			loader.load( 'models/gltf/LittlestTokyo.glb', function ( gltf ) {
 
-				var model = gltf.scene;
+				const model = gltf.scene;
 				model.position.set( 1, 1, 0 );
 				model.scale.set( 0.01, 0.01, 0.01 );
 				model.traverse( function ( child ) {
@@ -123,7 +122,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				mixer.update( delta );
 

examples/webgl_animation_keyframes.html

@@ -24,11 +24,11 @@
 			//////////////////////////////
 			// Global objects
 			//////////////////////////////
-			var worldScene = null; // THREE.Scene where it all will be rendered
-			var renderer = null;
-			var camera = null;
-			var clock = null;
-			var mixers = []; // All the THREE.AnimationMixer objects for all the animations in the scene
+			let worldScene = null; // THREE.Scene where it all will be rendered
+			let renderer = null;
+			let camera = null;
+			let clock = null;
+			const mixers = []; // All the THREE.AnimationMixer objects for all the animations in the scene
 			//////////////////////////////
 
 
@@ -40,15 +40,15 @@
 			// A model may have multiple SkinnedMesh objects as well as several rigs (armatures). Units will define which
 			// meshes, armatures and animations to use. We will load the whole scene for each object and clone it for each unit.
 			// Models are from https://www.mixamo.com/
-			var MODELS = [
+			const MODELS = [
 				{ name: "Soldier" },
 				{ name: "Parrot" },
 				// { name: "RiflePunch" },
 			];
 
 			// Here we define instances of the models that we want to place in the scene, their position, scale and the animations
 			// that must be played.
-			var UNITS = [
+			const UNITS = [
 				{
 					modelName: "Soldier", // Will use the 3D model from file models/gltf/Soldier.glb
 					meshName: "vanguard_Mesh", // Name of the main mesh to animate
@@ -91,7 +91,7 @@
 			//////////////////////////////
 			// The main setup happens here
 			//////////////////////////////
-			var numLoadedModels = 0;
+			let numLoadedModels = 0;
 			initScene();
 			initRenderer();
 			loadModels();
@@ -109,9 +109,9 @@
 			 */
 			function loadModels() {
 
-				for ( var i = 0; i < MODELS.length; ++ i ) {
+				for ( let i = 0; i < MODELS.length; ++ i ) {
 
-					var m = MODELS[ i ];
+					const m = MODELS[ i ];
 
 					loadGltfModel( m, function () {
 
@@ -136,25 +136,25 @@
 			 */
 			function instantiateUnits() {
 
-				var numSuccess = 0;
+				let numSuccess = 0;
 
-				for ( var i = 0; i < UNITS.length; ++ i ) {
+				for ( let i = 0; i < UNITS.length; ++ i ) {
 
-					var u = UNITS[ i ];
-					var model = getModelByName( u.modelName );
+					const u = UNITS[ i ];
+					const model = getModelByName( u.modelName );
 
 					if ( model ) {
 
-						var clonedScene = SkeletonUtils.clone( model.scene );
+						const clonedScene = SkeletonUtils.clone( model.scene );
 
 						if ( clonedScene ) {
 
 							// THREE.Scene is cloned properly, let's find one mesh and launch animation for it
-							var clonedMesh = clonedScene.getObjectByName( u.meshName );
+							const clonedMesh = clonedScene.getObjectByName( u.meshName );
 
 							if ( clonedMesh ) {
 
-								var mixer = startAnimation( clonedMesh, model.animations, u.animationName );
+								const mixer = startAnimation( clonedMesh, model.animations, u.animationName );
 
 								// Save the animation mixer in the list, will need it in the animation loop
 								mixers.push( mixer );
@@ -211,12 +211,12 @@
 			 */
 			function startAnimation( skinnedMesh, animations, animationName ) {
 
-				var mixer = new THREE.AnimationMixer( skinnedMesh );
-				var clip = THREE.AnimationClip.findByName( animations, animationName );
+				const mixer = new THREE.AnimationMixer( skinnedMesh );
+				const clip = THREE.AnimationClip.findByName( animations, animationName );
 
 				if ( clip ) {
 
-					var action = mixer.clipAction( clip );
+					const action = mixer.clipAction( clip );
 					action.play();
 
 				}
@@ -232,7 +232,7 @@
 			 */
 			function getModelByName( name ) {
 
-				for ( var i = 0; i < MODELS.length; ++ i ) {
+				for ( let i = 0; i < MODELS.length; ++ i ) {
 
 					if ( MODELS[ i ].name === name ) {
 
@@ -253,12 +253,12 @@
 			 */
 			function loadGltfModel( model, onLoaded ) {
 
-				var loader = new GLTFLoader();
-				var modelName = "models/gltf/" + model.name + ".glb";
+				const loader = new GLTFLoader();
+				const modelName = "models/gltf/" + model.name + ".glb";
 
 				loader.load( modelName, function ( gltf ) {
 
-					var scene = gltf.scene;
+					const scene = gltf.scene;
 
 					model.animations = gltf.animations;
 					model.scene = scene;
@@ -292,11 +292,11 @@
 
 				// Get the time elapsed since the last frame
 
-				var mixerUpdateDelta = clock.getDelta();
+				const mixerUpdateDelta = clock.getDelta();
 
 				// Update all the animation frames
 
-				for ( var i = 0; i < mixers.length; ++ i ) {
+				for ( let i = 0; i < mixers.length; ++ i ) {
 
 					mixers[ i ].update( mixerUpdateDelta );
 
@@ -316,7 +316,7 @@
 			 */
 			function initRenderer() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -342,11 +342,11 @@
 				worldScene.background = new THREE.Color( 0xa0a0a0 );
 				worldScene.fog = new THREE.Fog( 0xa0a0a0, 10, 22 );
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 20, 0 );
 				worldScene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 10;
@@ -358,7 +358,7 @@
 				worldScene.add( dirLight );
 
 				// ground
-				var groundMesh = new THREE.Mesh(
+				const groundMesh = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 40, 40 ),
 					new THREE.MeshPhongMaterial( {
 						color: 0x999999,

examples/webgl_animation_multiple.html

@@ -36,12 +36,12 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var scene, renderer, camera, stats;
-			var model, skeleton, mixer, clock;
+			let scene, renderer, camera, stats;
+			let model, skeleton, mixer, clock;
 
-			var crossFadeControls = [];
+			const crossFadeControls = [];
 
-			var currentBaseAction = 'idle';
+			let currentBaseAction = 'idle';
 			const allActions = [];
 			const baseActions = {
 				idle: { weight: 1 },
@@ -54,24 +54,24 @@
 				agree: { weight: 0 },
 				headShake: { weight: 0 }
 			};
-			var panelSettings, numAnimations;
+			let panelSettings, numAnimations;
 
 			init();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				clock = new THREE.Clock();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( 3, 10, 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 2;
@@ -84,12 +84,12 @@
 
 				// ground
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/Xbot.glb', function ( gltf ) {
 
 					model = gltf.scene;
@@ -105,7 +105,7 @@
 					skeleton.visible = false;
 					scene.add( skeleton );
 
-					var animations = gltf.animations;
+					const animations = gltf.animations;
 					mixer = new THREE.AnimationMixer( model );
 
 					numAnimations = animations.length;
@@ -160,7 +160,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( - 1, 2, 3 );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enablePan = false;
 				controls.enableZoom = false;
 				controls.target.set( 0, 1, 0 );
@@ -175,11 +175,11 @@
 
 			function createPanel() {
 
-				var panel = new GUI( { width: 310 } );
+				const panel = new GUI( { width: 310 } );
 
-				var folder1 = panel.addFolder( 'Base Actions' );
-				var folder2 = panel.addFolder( 'Additive Action Weights' );
-				var folder3 = panel.addFolder( 'General Speed' );
+				const folder1 = panel.addFolder( 'Base Actions' );
+				const folder2 = panel.addFolder( 'Additive Action Weights' );
+				const folder3 = panel.addFolder( 'General Speed' );
 
 				panelSettings = {
 					'modify time scale': 1.0
@@ -404,7 +404,7 @@
 
 				// Get the time elapsed since the last frame, used for mixer update
 
-				var mixerUpdateDelta = clock.getDelta();
+				const mixerUpdateDelta = clock.getDelta();
 
 				// Update the animation mixer, the stats panel, and render this frame