Examples: More clean up.

Author: Mugen87

examples/webgl_modifier_subdivision.html

@@ -32,14 +32,14 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { SubdivisionModifier } from './jsm/modifiers/SubdivisionModifier.js';
 
-			var camera, scene, renderer, stats, smoothMesh, wireframe;
+			let camera, scene, renderer, stats, smoothMesh, wireframe;
 
-			var smoothMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
-			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } );
+			const smoothMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
+			const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } );
 
-			var faceIndices = [ 'a', 'b', 'c' ];
+			const faceIndices = [ 'a', 'b', 'c' ];
 
-			var params = {
+			const params = {
 				subdivisions: 2
 			};
 
@@ -53,23 +53,23 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var light = new THREE.PointLight( 0xffffff, 1.5 );
+				const light = new THREE.PointLight( 0xffffff, 1.5 );
 				light.position.set( 1000, 1000, 2000 );
 				scene.add( light );
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( bufferGeometry ) {
 
 					// converting to legacy THREE.Geometry because SubdivisionModifier only returns THREE.Geometry
 
-					var geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
+					const geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
 					geometry.mergeVertices();
 
-					var material = new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe: true } );
-					var mesh = new THREE.Mesh( bufferGeometry, material );
+					const material = new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe: true } );
+					const mesh = new THREE.Mesh( bufferGeometry, material );
 					scene.add( mesh );
 
-					var gui = new GUI();
+					const gui = new GUI();
 
 					gui.add( params, 'subdivisions', 0, 3 ).step( 1 ).onChange( function ( subdivisions ) {
 
@@ -94,7 +94,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 400;
 
@@ -110,23 +110,23 @@
 
 			function subdivide( geometry, subdivisions ) {
 
-				var modifier = new SubdivisionModifier( subdivisions );
+				const modifier = new SubdivisionModifier( subdivisions );
 
-				var smoothGeometry = modifier.modify( geometry );
+				const smoothGeometry = modifier.modify( geometry );
 
 				// colorify faces
 
-				for ( var i = 0; i < smoothGeometry.faces.length; i ++ ) {
+				for ( let i = 0; i < smoothGeometry.faces.length; i ++ ) {
 
-					var face = smoothGeometry.faces[ i ];
+					const face = smoothGeometry.faces[ i ];
 
-					for ( var j = 0; j < 3; j ++ ) {
+					for ( let j = 0; j < 3; j ++ ) {
 
-						var vertexIndex = face[ faceIndices[ j ] ];
-						var vertex = smoothGeometry.vertices[ vertexIndex ];
+						const vertexIndex = face[ faceIndices[ j ] ];
+						const vertex = smoothGeometry.vertices[ vertexIndex ];
 
-						var hue = ( vertex.y / 200 ) + 0.5;
-						var color = new THREE.Color().setHSL( hue, 1, 0.5 );
+						const hue = ( vertex.y / 200 ) + 0.5;
+						const color = new THREE.Color().setHSL( hue, 1, 0.5 );
 						face.vertexColors[ j ] = color;
 
 					}

examples/webgl_modifier_tessellation.html

@@ -62,17 +62,16 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { TessellateModifier } from './jsm/modifiers/TessellateModifier.js';
 
+			let renderer, scene, camera, stats;
 
-			var renderer, scene, camera, stats;
+			let controls;
 
-			var controls;
+			let mesh, uniforms;
 
-			var mesh, uniforms;
+			const WIDTH = window.innerWidth;
+			const HEIGHT = window.innerHeight;
 
-			var WIDTH = window.innerWidth,
-				HEIGHT = window.innerHeight;
-
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 				init( font );
@@ -90,7 +89,7 @@
 
 				//
 
-				var geometry = new THREE.TextGeometry( "THREE.JS", {
+				let geometry = new THREE.TextGeometry( "THREE.JS", {
 
 					font: font,
 
@@ -106,9 +105,9 @@
 
 				geometry.center();
 
-				var tessellateModifier = new TessellateModifier( 8 );
+				const tessellateModifier = new TessellateModifier( 8 );
 
-				for ( var i = 0; i < 6; i ++ ) {
+				for ( let i = 0; i < 6; i ++ ) {
 
 					tessellateModifier.modify( geometry );
 
@@ -118,26 +117,26 @@
 
 				geometry = new THREE.BufferGeometry().fromGeometry( geometry );
 
-				var numFaces = geometry.attributes.position.count / 3;
+				const numFaces = geometry.attributes.position.count / 3;
 
-				var colors = new Float32Array( numFaces * 3 * 3 );
-				var displacement = new Float32Array( numFaces * 3 * 3 );
+				const colors = new Float32Array( numFaces * 3 * 3 );
+				const displacement = new Float32Array( numFaces * 3 * 3 );
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				for ( var f = 0; f < numFaces; f ++ ) {
+				for ( let f = 0; f < numFaces; f ++ ) {
 
-					var index = 9 * f;
+					const index = 9 * f;
 
-					var h = 0.2 * Math.random();
-					var s = 0.5 + 0.5 * Math.random();
-					var l = 0.5 + 0.5 * Math.random();
+					const h = 0.2 * Math.random();
+					const s = 0.5 + 0.5 * Math.random();
+					const l = 0.5 + 0.5 * Math.random();
 
 					color.setHSL( h, s, l );
 
-					var d = 10 * ( 0.5 - Math.random() );
+					const d = 10 * ( 0.5 - Math.random() );
 
-					for ( var i = 0; i < 3; i ++ ) {
+					for ( let i = 0; i < 3; i ++ ) {
 
 						colors[ index + ( 3 * i ) ] = color.r;
 						colors[ index + ( 3 * i ) + 1 ] = color.g;
@@ -162,7 +161,7 @@
 
 				};
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+				const shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -180,7 +179,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				controls = new TrackballControls( camera, renderer.domElement );
@@ -215,7 +214,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );