Home Explore Help
Register Sign In
samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: Clean up. (#30820)

Michael Herzog 11 months ago
parent
f06cc7d42b
commit
94f1548f88
4 changed files with 425 additions and 347 deletions
Unified View Show Diff Stats
  1. 136 121
      examples/webgl_animation_walk.html
  2. 95 83
      examples/webgl_gpgpu_water.html
  3. 98 52
      examples/webgl_random_uv.html
  4. 96 91
      examples/webgl_watch.html

+ 136 - 121
examples/webgl_animation_walk.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - animation - skinning</title>
 
+		<title>three.js webgl - animation - walk</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
@@ -19,10 +19,6 @@
 
 			use arrows to control characters
 
 			use arrows to control characters
 
 		</div>
 
 		</div>
 
 
 
-		<!-- Import maps polyfill -->
 
-		<!-- Remove this when import maps will be widely supported -->
 
-		<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
 
-
 
 		<script type="importmap">
 
 		<script type="importmap">
 
 			{
 
 			{
 
 				"imports": {
 
 				"imports": {
 
@@ -44,11 +40,11 @@
 
 
 
 			let scene, renderer, camera, floor, orbitControls;
 
 			let scene, renderer, camera, floor, orbitControls;
 
 			let group, followGroup, model, skeleton, mixer, clock;
 
 			let group, followGroup, model, skeleton, mixer, clock;
 
-		
+
 
 			let actions;
 
 			let actions;
 
 
 
-			let settings = {
 
-				show_skeleton:false,
 
+			const settings = {
 
+				show_skeleton: false,
 
 				fixe_transition: true,
 
 				fixe_transition: true,
 
 			};
 
 			};
 
 
 
@@ -57,17 +53,17 @@
 
 
 
 			const controls = {
 
 			const controls = {
 
 
 
-				key:[0,0],
 
-				ease : new THREE.Vector3(),
 
-				position : new THREE.Vector3(),
 
-				up : new THREE.Vector3(0, 1, 0),
 
+				key: [ 0, 0 ],
 
+				ease: new THREE.Vector3(),
 
+				position: new THREE.Vector3(),
 
+				up: new THREE.Vector3( 0, 1, 0 ),
 
 				rotate: new THREE.Quaternion(),
 
 				rotate: new THREE.Quaternion(),
 
-				current:'Idle',
 
-				fadeDuration:0.5,
 
-				runVelocity:5,
 
-				walkVelocity:1.8,
 
-				rotateSpeed:0.05,
 
-				floorDecale:0,
 
+				current: 'Idle',
 
+				fadeDuration: 0.5,
 
+				runVelocity: 5,
 
+				walkVelocity: 1.8,
 
+				rotateSpeed: 0.05,
 
+				floorDecale: 0,
 
 
 
 			};
 
 			};
 
 
 
@@ -90,24 +86,20 @@
 
 				scene.fog = new THREE.Fog( 0x5e5d5d, 2, 20 );
 
 				scene.fog = new THREE.Fog( 0x5e5d5d, 2, 20 );
 
 
 
 				group = new THREE.Group();
 
 				group = new THREE.Group();
 
-				scene.add(group);
 
+				scene.add( group );
 
 
 
 				followGroup = new THREE.Group();
 
 				followGroup = new THREE.Group();
 
-				scene.add(followGroup);
 
-
 
-				/*const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xb3602b, 0.5 );
 
-				hemiLight.position.set( 0, 20, 0 );
 
-				scene.add( hemiLight );*/
 
+				scene.add( followGroup );
 
 
 
 				const dirLight = new THREE.DirectionalLight( 0xffffff, 5 );
 
 				const dirLight = new THREE.DirectionalLight( 0xffffff, 5 );
 
 				dirLight.position.set( - 2, 5, - 3 );
 
 				dirLight.position.set( - 2, 5, - 3 );
 
 				dirLight.castShadow = true;
 
 				dirLight.castShadow = true;
 
-				let cam = dirLight.shadow.camera;
 
+				const cam = dirLight.shadow.camera;
 
 				cam.top = cam.right = 2;
 
 				cam.top = cam.right = 2;
 
 				cam.bottom = cam.left = - 2;
 
 				cam.bottom = cam.left = - 2;
 
 				cam.near = 3;
 
 				cam.near = 3;
 
 				cam.far = 8;
 
 				cam.far = 8;
 
-				dirLight.shadow.bias = -0.005;
 
+				dirLight.shadow.bias = - 0.005;
 
 				dirLight.shadow.radius = 4;
 
 				dirLight.shadow.radius = 4;
 
 				followGroup.add( dirLight );
 
 				followGroup.add( dirLight );
 
 				followGroup.add( dirLight.target );
 
 				followGroup.add( dirLight.target );
 
@@ -117,6 +109,7 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setAnimationLoop( animate );
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				renderer.toneMappingExposure = 0.5;
 
 				renderer.toneMappingExposure = 0.5;
 
 				renderer.shadowMap.enabled = true;
 
 				renderer.shadowMap.enabled = true;
 
@@ -149,14 +142,14 @@
 
 						loadModel();
 
 						loadModel();
 
 						addFloor();
 
 						addFloor();
 
 
 
-					});
 
+					} );
 
 
 
 			}
 
 			}
 
 
 
 			function addFloor() {
 
 			function addFloor() {
 
 
 
-				let size = 50;
 
-				let repeat = 16;
 
+				const size = 50;
 
+				const repeat = 16;
 
 
 
 				const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
 
 				const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
 
 
 
@@ -171,23 +164,23 @@
 
 				floorN.wrapS = floorN.wrapT = THREE.RepeatWrapping;
 
 				floorN.wrapS = floorN.wrapT = THREE.RepeatWrapping;
 
 				floorN.anisotropy = maxAnisotropy;
 
 				floorN.anisotropy = maxAnisotropy;
 
 
 
-				let mat = new THREE.MeshStandardMaterial( { map:floorT, normalMap:floorN, normalScale:new THREE.Vector2(0.5,0.5), color: 0x404040, depthWrite: false, roughness:0.85 } )
 
+				const mat = new THREE.MeshStandardMaterial( { map: floorT, normalMap: floorN, normalScale: new THREE.Vector2( 0.5, 0.5 ), color: 0x404040, depthWrite: false, roughness: 0.85 } );
 
 
 
-				let g = new THREE.PlaneGeometry( size, size, 50, 50 );
 
-				g.rotateX( -PI90 );
 
+				const g = new THREE.PlaneGeometry( size, size, 50, 50 );
 
+				g.rotateX( - PI90 );
 
 
 
 				floor = new THREE.Mesh( g, mat );
 
 				floor = new THREE.Mesh( g, mat );
 
 				floor.receiveShadow = true;
 
 				floor.receiveShadow = true;
 
 				scene.add( floor );
 
 				scene.add( floor );
 
 
 
-				controls.floorDecale = (size / repeat) * 4;
 
+				controls.floorDecale = ( size / repeat ) * 4;
 
 
 
 				const bulbGeometry = new THREE.SphereGeometry( 0.05, 16, 8 );
 
 				const bulbGeometry = new THREE.SphereGeometry( 0.05, 16, 8 );
 
-				let bulbLight = new THREE.PointLight( 0xffee88, 2, 500, 2 );
 
+				const bulbLight = new THREE.PointLight( 0xffee88, 2, 500, 2 );
 
 
 
-				let bulbMat = new THREE.MeshStandardMaterial( { emissive: 0xffffee, emissiveIntensity: 1, color: 0x000000 } );
 
+				const bulbMat = new THREE.MeshStandardMaterial( { emissive: 0xffffee, emissiveIntensity: 1, color: 0x000000 } );
 
 				bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
 
 				bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
 
-				bulbLight.position.set( 1, 0.1, -3 );
 
+				bulbLight.position.set( 1, 0.1, - 3 );
 
 				bulbLight.castShadow = true;
 
 				bulbLight.castShadow = true;
 
 				floor.add( bulbLight );
 
 				floor.add( bulbLight );
 
 
 
@@ -206,26 +199,32 @@
 
 
 
 					model.traverse( function ( object ) {
 
 					model.traverse( function ( object ) {
 
 
 
-						if ( object.isMesh ){
 
-						    if( object.name == 'vanguard_Mesh' ){
 
-						    	object.castShadow = true;
 
+						if ( object.isMesh ) {
 
+
 
+							if ( object.name == 'vanguard_Mesh' ) {
 
+
 
+								object.castShadow = true;
 
 								object.receiveShadow = true;
 
 								object.receiveShadow = true;
 
 								object.material.shadowSide = THREE.DoubleSide;
 
 								object.material.shadowSide = THREE.DoubleSide;
 
 								//object.material.envMapIntensity = 0.5;
 
 								//object.material.envMapIntensity = 0.5;
 
 								object.material.metalness = 1.0;
 
 								object.material.metalness = 1.0;
 
 								object.material.roughness = 0.2;
 
 								object.material.roughness = 0.2;
 
-								object.material.color.set(1,1,1);
 
+								object.material.color.set( 1, 1, 1 );
 
 								object.material.metalnessMap = object.material.map;
 
 								object.material.metalnessMap = object.material.map;
 
-						    } else {
 
-						    	object.material.metalness = 1;
 
+			
+							} else {
 
+
 
+								object.material.metalness = 1;
 
 								object.material.roughness = 0;
 
 								object.material.roughness = 0;
 
 								object.material.transparent = true;
 
 								object.material.transparent = true;
 
 								object.material.opacity = 0.8;
 
 								object.material.opacity = 0.8;
 
-								object.material.color.set(1,1,1);
 
-						    }
 
+								object.material.color.set( 1, 1, 1 );
 
+			
+							}
 
+			
 						}
 
 						}
 
 
 
-					});
 
+					} );
 
 
 
 					//
 
 					//
 
 
 
@@ -244,28 +243,30 @@
 
 					mixer = new THREE.AnimationMixer( model );
 
 					mixer = new THREE.AnimationMixer( model );
 
 
 
 					actions = {
 
 					actions = {
 
-						Idle:mixer.clipAction( animations[ 0 ] ),
 
-						Walk:mixer.clipAction( animations[ 3 ] ),
 
-						Run:mixer.clipAction( animations[ 1 ] )
 
+						Idle: mixer.clipAction( animations[ 0 ] ),
 
+						Walk: mixer.clipAction( animations[ 3 ] ),
 
+						Run: mixer.clipAction( animations[ 1 ] )
 
 					};
 
 					};
 
 
 
-					for( let m in actions ){
 
-						actions[m].enabled = true;
 
-						actions[m].setEffectiveTimeScale( 1 );
 
-						if(m!=='Idle') actions[m].setEffectiveWeight( 0 );
 
+					for ( const m in actions ) {
 
+
 
+						actions[ m ].enabled = true;
 
+						actions[ m ].setEffectiveTimeScale( 1 );
 
+						if ( m !== 'Idle' ) actions[ m ].setEffectiveWeight( 0 );
 
+			
 					}
 
 					}
 
 
 
 					actions.Idle.play();
 
 					actions.Idle.play();
 
 
 
 					animate();
 
 					animate();
 
 
 
-				});
 
+				} );
 
 
 
 			}
 
 			}
 
 
 
 			function updateCharacter( delta ) {
 
 			function updateCharacter( delta ) {
 
 
 
-				const fade = controls.fadeDuration
 
+				const fade = controls.fadeDuration;
 
 				const key = controls.key;
 
 				const key = controls.key;
 
 				const up = controls.up;
 
 				const up = controls.up;
 
 				const ease = controls.ease;
 
 				const ease = controls.ease;
 
@@ -273,85 +274,97 @@
 
 				const position = controls.position;
 
 				const position = controls.position;
 
 				const azimut = orbitControls.getAzimuthalAngle();
 
 				const azimut = orbitControls.getAzimuthalAngle();
 
 
 
-				let active = key[0] === 0 && key[1] === 0 ? false : true;
 
-				let play = active ? (key[2] ? 'Run' : 'Walk') : 'Idle';
 
+				const active = key[ 0 ] === 0 && key[ 1 ] === 0 ? false : true;
 
+				const play = active ? ( key[ 2 ] ? 'Run' : 'Walk' ) : 'Idle';
 
+
 
+				// change animation
 
+
 
+				if ( controls.current != play ) {
 
+
 
+
 
+
 
+					const current = actions[ play ];
 
+					const old = actions[ controls.current ];
 
+					controls.current = play;
 
 
 
-		        // change animation
 
+					if ( settings.fixe_transition ) {
 
 
 
-		        if ( controls.current != play ){
 
+						current.reset();
 
+						current.weight = 1.0;
 
+						current.stopFading();
 
+						old.stopFading();
 
+						// sycro if not idle
 
+						if ( play !== 'Idle' ) current.time = old.time * ( current.getClip().duration / old.getClip().duration );
 
+						old._scheduleFading( fade, old.getEffectiveWeight(), 0 );
 
+						current._scheduleFading( fade, current.getEffectiveWeight(), 1 );
 
+						current.play();
 
 
 
-		           
+					} else {
 
 
 
-		        	const current = actions[play];
 
-		            const old = actions[controls.current];
 
-		            controls.current = play;
 
+						setWeight( current, 1.0 );
 
+						old.fadeOut( fade );
 
+						current.reset().fadeIn( fade ).play();
 
 
 
-		            if( settings.fixe_transition ){
 
-		            	current.reset()
 
-		            	current.weight = 1.0;
 
-		            	current.stopFading()
 
-		            	old.stopFading();
 
-		            	// sycro if not idle
 
-                        if ( play !== 'Idle' ) current.time = old.time * ( current.getClip().duration / old.getClip().duration );
 
-		            	old._scheduleFading( fade, old.getEffectiveWeight(), 0 );
 
-                        current._scheduleFading( fade, current.getEffectiveWeight(), 1 );	
-			            current.play();
 
-		            } else {
 
-		            	setWeight( current, 1.0 );
 
-			            old.fadeOut(fade);
 
-			            current.reset().fadeIn( fade ).play();
 
-		            }
 
+					}
 
+
 
+				}
 
 
 
-		        }
 
+				// move object
 
 
 
-		        // move object
 
+				if ( controls.current !== 'Idle' ) {
 
 
 
-		        if ( controls.current !== 'Idle' ) {
 
+					// run/walk velocity
 
+					const velocity = controls.current == 'Run' ? controls.runVelocity : controls.walkVelocity;
 
 
 
-		            // run/walk velocity
 
-		            let velocity = controls.current == 'Run' ? controls.runVelocity : controls.walkVelocity;
 
+					// direction with key
 
+					ease.set( key[ 1 ], 0, key[ 0 ] ).multiplyScalar( velocity * delta );
 
 
 
-		            // direction with key
 
-		            ease.set( key[1], 0, key[0] ).multiplyScalar( velocity * delta );
 
+					// calculate camera direction
 
+					const angle = unwrapRad( Math.atan2( ease.x, ease.z ) + azimut );
 
+					rotate.setFromAxisAngle( up, angle );
 
 
 
-		            // calculate camera direction
 
-		            let angle = unwrapRad( Math.atan2( ease.x, ease.z ) + azimut );
 
-		            rotate.setFromAxisAngle( up, angle );
 
-		            
-		            // apply camera angle on ease
 
-		            controls.ease.applyAxisAngle( up, azimut );
 
+					// apply camera angle on ease
 
+					controls.ease.applyAxisAngle( up, azimut );
 
 
 
-		            position.add( ease );
 
-		            camera.position.add( ease );
 
+					position.add( ease );
 
+					camera.position.add( ease );
 
 
 
-		            group.position.copy( position );
 
-		            group.quaternion.rotateTowards( rotate, controls.rotateSpeed );
 
+					group.position.copy( position );
 
+					group.quaternion.rotateTowards( rotate, controls.rotateSpeed );
 
 
 
-		            orbitControls.target.copy( position ).add({x:0, y:1, z:0});
 
-		            followGroup.position.copy( position );
 
+					orbitControls.target.copy( position ).add( { x: 0, y: 1, z: 0 } );
 
+					followGroup.position.copy( position );
 
 
 
-		            // decale floor at infinie
 
-		            let dx = ( position.x - floor.position.x );
 
-		            let dz = ( position.z - floor.position.z );
 
-		            if( Math.abs(dx) > controls.floorDecale ) floor.position.x += dx;
 
-		            if( Math.abs(dz) > controls.floorDecale ) floor.position.z += dz;
 
+					// decale floor at infinie
 
+					const dx = ( position.x - floor.position.x );
 
+					const dz = ( position.z - floor.position.z );
 
+					if ( Math.abs( dx ) > controls.floorDecale ) floor.position.x += dx;
 
+					if ( Math.abs( dz ) > controls.floorDecale ) floor.position.z += dz;
 
 
 
-			    }
 
+				}
 
 
 
-				mixer.update( delta );
 
+				if ( mixer ) mixer.update( delta );
 
+			
 				orbitControls.update();
 
 				orbitControls.update();
 
 
 
 			}
 
 			}
 
 
 
-			function unwrapRad(r) {
 
-				return Math.atan2(Math.sin(r), Math.cos(r));
 
+			function unwrapRad( r ) {
 
+
 
+				return Math.atan2( Math.sin( r ), Math.cos( r ) );
 
+			
 			}
 
 			}
 
 
 
 			function createPanel() {
 
 			function createPanel() {
 
 
 
 				const panel = new GUI( { width: 310 } );
 
 				const panel = new GUI( { width: 310 } );
 
 
 
-				panel.add( settings, 'show_skeleton' ).onChange( (b) => { skeleton.visible = b; } );
 
+				panel.add( settings, 'show_skeleton' ).onChange( ( b ) => {
 
+
 
+					skeleton.visible = b;
 
+
 
+				} );
 
+			
 				panel.add( settings, 'fixe_transition' );
 
 				panel.add( settings, 'fixe_transition' );
 
 
 
 			}
 
 			}
 
@@ -368,12 +381,14 @@
 
 
 
 				const key = controls.key;
 
 				const key = controls.key;
 
 				switch ( event.code ) {
 
 				switch ( event.code ) {
 
-					case 'ArrowUp': case 'KeyW': case 'KeyZ': key[0] = -1; break;
 
-					case 'ArrowDown': case 'KeyS': key[0] = 1; break;
 
-					case 'ArrowLeft': case 'KeyA': case 'KeyQ': key[1] = -1; break;
 
-					case 'ArrowRight': case 'KeyD': key[1] = 1; break;
 
-					case 'ShiftLeft' : case 'ShiftRight' : key[2] = 1; break;
 
-				}
 
+
 
+					case 'ArrowUp': case 'KeyW': case 'KeyZ': key[ 0 ] = - 1; break;
 
+					case 'ArrowDown': case 'KeyS': key[ 0 ] = 1; break;
 
+					case 'ArrowLeft': case 'KeyA': case 'KeyQ': key[ 1 ] = - 1; break;
 
+					case 'ArrowRight': case 'KeyD': key[ 1 ] = 1; break;
 
+					case 'ShiftLeft' : case 'ShiftRight' : key[ 2 ] = 1; break;
 
+			
+	}
 
 
 
 			}
 
 			}
 
 
 
@@ -381,12 +396,14 @@
 
 
 
 				const key = controls.key;
 
 				const key = controls.key;
 
 				switch ( event.code ) {
 
 				switch ( event.code ) {
 
-					case 'ArrowUp': case 'KeyW': case 'KeyZ': key[0] = key[0]<0 ? 0:key[0]; break;
 
-					case 'ArrowDown': case 'KeyS': key[0] = key[0]>0 ? 0:key[0]; break;
 
-					case 'ArrowLeft': case 'KeyA': case 'KeyQ': key[1] = key[1]<0 ? 0:key[1]; break;
 
-					case 'ArrowRight': case 'KeyD': key[1] = key[1]>0 ? 0:key[1]; break;
 
-					case 'ShiftLeft' : case 'ShiftRight' : key[2] = 0; break;
 
-				}
 
+
 
+					case 'ArrowUp': case 'KeyW': case 'KeyZ': key[ 0 ] = key[ 0 ] < 0 ? 0 : key[ 0 ]; break;
 
+					case 'ArrowDown': case 'KeyS': key[ 0 ] = key[ 0 ] > 0 ? 0 : key[ 0 ]; break;
 
+					case 'ArrowLeft': case 'KeyA': case 'KeyQ': key[ 1 ] = key[ 1 ] < 0 ? 0 : key[ 1 ]; break;
 
+					case 'ArrowRight': case 'KeyD': key[ 1 ] = key[ 1 ] > 0 ? 0 : key[ 1 ]; break;
 
+					case 'ShiftLeft' : case 'ShiftRight' : key[ 2 ] = 0; break;
 
+			
+	}
 
 
 
 			}
 
 			}
 
 
 
@@ -402,9 +419,7 @@
 
 
 
 				// Render loop
 
 				// Render loop
 
 
 
-				requestAnimationFrame( animate );
 
-
 
-				let delta = clock.getDelta();
 
+				const delta = clock.getDelta();
 
 
 
 				updateCharacter( delta );
 
 				updateCharacter( delta );

+ 95 - 83
examples/webgl_gpgpu_water.html
View File 

@@ -157,14 +157,13 @@
 
 			const BOUNDS_HALF = BOUNDS * 0.5;
 
 			const BOUNDS_HALF = BOUNDS * 0.5;
 
 
 
 			let tmpHeightmap = null;
 
 			let tmpHeightmap = null;
 
-			let tmpQuat = new THREE.Quaternion()
 
-			let tmpQuatX = new THREE.Quaternion()
 
-			let tmpQuatZ = new THREE.Quaternion()
 
+			const tmpQuat = new THREE.Quaternion();
 
+			const tmpQuatX = new THREE.Quaternion();
 
+			const tmpQuatZ = new THREE.Quaternion();
 
 			let duckModel = null;
 
 			let duckModel = null;
 
 
 
 			let container, stats;
 
 			let container, stats;
 
 			let camera, scene, renderer, controls;
 
 			let camera, scene, renderer, controls;
 
-			let mouseMoved = false;
 
 			let mousedown = false;
 
 			let mousedown = false;
 
 			const mouseCoords = new THREE.Vector2();
 
 			const mouseCoords = new THREE.Vector2();
 
 			const raycaster = new THREE.Raycaster();
 
 			const raycaster = new THREE.Raycaster();
 
@@ -175,7 +174,6 @@
 
 			let meshRay;
 
 			let meshRay;
 
 			let gpuCompute;
 
 			let gpuCompute;
 
 			let heightmapVariable;
 
 			let heightmapVariable;
 
-			let waterUniforms;
 
 			let smoothShader;
 
 			let smoothShader;
 
 			let readWaterLevelShader;
 
 			let readWaterLevelShader;
 
 			let readWaterLevelRenderTarget;
 
 			let readWaterLevelRenderTarget;
 
@@ -194,10 +192,10 @@
 
 				mouseSize: 0.2,
 
 				mouseSize: 0.2,
 
 				mouseDeep: 0.01,
 
 				mouseDeep: 0.01,
 
 				viscosity: 0.93,
 
 				viscosity: 0.93,
 
-				speed:5,
 
+				speed: 5,
 
 				ducksEnabled: ducksEnabled,
 
 				ducksEnabled: ducksEnabled,
 
-				wireframe:false,
 
-				shadow:false,
 
+				wireframe: false,
 
+				shadow: false,
 
 			};
 
 			};
 
 
 
 			init();
 
 			init();
 
@@ -215,10 +213,10 @@
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
 				sun = new THREE.DirectionalLight( 0xFFFFFF, 4.0 );
 
 				sun = new THREE.DirectionalLight( 0xFFFFFF, 4.0 );
 
-				sun.position.set(  -1, 2.6, 1.4 );
 
+				sun.position.set( - 1, 2.6, 1.4 );
 
 				scene.add( sun );
 
 				scene.add( sun );
 
 
 
-				renderer = new THREE.WebGLRenderer({antialias:true, stencil:false});
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
@@ -240,16 +238,16 @@
 
 
 
 				const rgbeLoader = new RGBELoader().setPath( './textures/equirectangular/' );
 
 				const rgbeLoader = new RGBELoader().setPath( './textures/equirectangular/' );
 
 				const glbloader = new GLTFLoader().setPath( 'models/gltf/' );
 
 				const glbloader = new GLTFLoader().setPath( 'models/gltf/' );
 
-				glbloader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) )
 
-				
-				const [ env, model ] = await Promise.all( [ rgbeLoader.loadAsync( 'blouberg_sunrise_2_1k.hdr' ), glbloader.loadAsync( 'duck.glb') ]);
 
+				glbloader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
 
+			
+				const [ env, model ] = await Promise.all( [ rgbeLoader.loadAsync( 'blouberg_sunrise_2_1k.hdr' ), glbloader.loadAsync( 'duck.glb' ) ] );
 
 				env.mapping = THREE.EquirectangularReflectionMapping;
 
 				env.mapping = THREE.EquirectangularReflectionMapping;
 
 				scene.environment = env;
 
 				scene.environment = env;
 
 				scene.background = env;
 
 				scene.background = env;
 
 				scene.backgroundBlurriness = 0.3;
 
 				scene.backgroundBlurriness = 0.3;
 
 				scene.environmentIntensity = 1.25;
 
 				scene.environmentIntensity = 1.25;
 
 
 
-				duckModel = model.scene.children[0];
 
+				duckModel = model.scene.children[ 0 ];
 
 				duckModel.receiveShadow = true;
 
 				duckModel.receiveShadow = true;
 
 				duckModel.castShadow = true;
 
 				duckModel.castShadow = true;
 
 
 
@@ -265,8 +263,12 @@
 
 					ducksEnabled = effectController.ducksEnabled;
 
 					ducksEnabled = effectController.ducksEnabled;
 
 
 
 					let i = NUM_DUCK;
 
 					let i = NUM_DUCK;
 
-					while(i--){ if ( ducks[ i ] ) ducks[ i ].visible = ducksEnabled; }
 
-				
+					while ( i -- ) {
 
+
 
+						if ( ducks[ i ] ) ducks[ i ].visible = ducksEnabled;
 
+
 
+					}
 
+			
 				};
 
 				};
 
 
 
 				gui.add( effectController, 'mouseSize', 0.1, 1.0, 0.1 ).onChange( valuesChanger );
 
 				gui.add( effectController, 'mouseSize', 0.1, 1.0, 0.1 ).onChange( valuesChanger );
 
@@ -274,15 +276,17 @@
 
 				gui.add( effectController, 'viscosity', 0.9, 0.999, 0.001 ).onChange( valuesChanger );
 
 				gui.add( effectController, 'viscosity', 0.9, 0.999, 0.001 ).onChange( valuesChanger );
 
 				gui.add( effectController, 'speed', 1, 6, 1 );
 
 				gui.add( effectController, 'speed', 1, 6, 1 );
 
 				gui.add( effectController, 'ducksEnabled' ).onChange( valuesChanger );
 
 				gui.add( effectController, 'ducksEnabled' ).onChange( valuesChanger );
 
-				gui.add( effectController, 'wireframe' ).onChange( (v)=>{ 
-					waterMesh.material.wireframe = v; 
-					poolBorder.material.wireframe = v; 
-				});
 
+				gui.add( effectController, 'wireframe' ).onChange( ( v )=>{
 
+
 
+					waterMesh.material.wireframe = v;
 
+					poolBorder.material.wireframe = v;
 
+			
+				} );
 
 				gui.add( effectController, 'shadow' ).onChange( addShadow );
 
 				gui.add( effectController, 'shadow' ).onChange( addShadow );
 
-				
+			
 				//const buttonSmooth = { smoothWater: function () {smoothWater();} };
 
 				//const buttonSmooth = { smoothWater: function () {smoothWater();} };
 
 				//gui.add( buttonSmooth, 'smoothWater' );
 
 				//gui.add( buttonSmooth, 'smoothWater' );
 
-				
+			
 
 
 				initWater();
 
 				initWater();
 
 
 
@@ -290,7 +294,7 @@
 
 
 
 				valuesChanger();
 
 				valuesChanger();
 
 
 
-				animate();
 
+				renderer.setAnimationLoop( animate );
 
 
 
 			}
 
 			}
 
 
 
@@ -299,14 +303,14 @@
 
 
 
 				const geometry = new THREE.PlaneGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
 
 				const geometry = new THREE.PlaneGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
 
 
 
-				const material = new WaterMaterial({
 
-					color:0x9bd2ec,
 
-					metalness:0.9,
 
-					roughness:0,
 
-					transparent:true,
 
-					opacity:0.8,
 
-					side:THREE.DoubleSide
 
-				});
 
+				const material = new WaterMaterial( {
 
+					color: 0x9bd2ec,
 
+					metalness: 0.9,
 
+					roughness: 0,
 
+					transparent: true,
 
+					opacity: 0.8,
 
+					side: THREE.DoubleSide
 
+				} );
 
 
 
 				waterMesh = new THREE.Mesh( geometry, material );
 
 				waterMesh = new THREE.Mesh( geometry, material );
 
 				waterMesh.rotation.x = - Math.PI * 0.5;
 
 				waterMesh.rotation.x = - Math.PI * 0.5;
 
@@ -318,12 +322,12 @@
 
 
 
 				scene.add( waterMesh );
 
 				scene.add( waterMesh );
 
 
 
-				// pool border 
-				const borderGeom = new THREE.TorusGeometry(4.2, 0.1, 12, 4);
 
-				borderGeom.rotateX(Math.PI*0.5);
 
-				borderGeom.rotateY(Math.PI*0.25);
 
-				poolBorder = new THREE.Mesh( borderGeom, new THREE.MeshStandardMaterial( { color: 0x908877, roughness:0.2 } ));
 
-				scene.add(poolBorder);
 
+				// pool border
 
+				const borderGeom = new THREE.TorusGeometry( 4.2, 0.1, 12, 4 );
 
+				borderGeom.rotateX( Math.PI * 0.5 );
 
+				borderGeom.rotateY( Math.PI * 0.25 );
 
+				poolBorder = new THREE.Mesh( borderGeom, new THREE.MeshStandardMaterial( { color: 0x908877, roughness: 0.2 } ) );
 
+				scene.add( poolBorder );
 
 				borderGeom.receiveShadow = true;
 
 				borderGeom.receiveShadow = true;
 
 				borderGeom.castShadow = true;
 
 				borderGeom.castShadow = true;
 
 
 
@@ -432,23 +436,23 @@
 
 				renderer.shadowMap.enabled = v;
 
 				renderer.shadowMap.enabled = v;
 
 				sun.castShadow = v;
 
 				sun.castShadow = v;
 
 
 
-				if(v){
 
+				if ( v ) {
 
 
 
 					renderer.shadowMap.type = THREE.VSMShadowMap;
 
 					renderer.shadowMap.type = THREE.VSMShadowMap;
 
-					let shadow = sun.shadow;
 
+					const shadow = sun.shadow;
 
 					shadow.mapSize.width = shadow.mapSize.height = 2048;
 
 					shadow.mapSize.width = shadow.mapSize.height = 2048;
 
 					shadow.radius = 2;
 
 					shadow.radius = 2;
 
 					shadow.bias = - 0.0005;
 
 					shadow.bias = - 0.0005;
 
-					let shadowCam = shadow.camera, s = 5;
 
+					const shadowCam = shadow.camera, s = 5;
 
 					shadowCam.near = 0.1;
 
 					shadowCam.near = 0.1;
 
 					shadowCam.far = 6;
 
 					shadowCam.far = 6;
 
 					shadowCam.right = shadowCam.top	= s;
 
 					shadowCam.right = shadowCam.top	= s;
 
-					shadowCam.left = shadowCam.bottom = -s;
 
+					shadowCam.left = shadowCam.bottom = - s;
 
 
 
 				} else {
 
 				} else {
 
 
 
-					if(sun.shadow) sun.shadow.dispose();
 
-					
+					if ( sun.shadow ) sun.shadow.dispose();
 
+			
 				}
 
 				}
 
 
 
 				// debug shadow
 
 				// debug shadow
 
@@ -521,7 +525,7 @@
 
 
 
 						const pos = sphere.position;
 
 						const pos = sphere.position;
 
 
 
-						let startPos = pos.clone();
 
+						const startPos = pos.clone();
 
 
 
 						// Set height
 
 						// Set height
 
 						pos.y = pixels[ 0 ];
 
 						pos.y = pixels[ 0 ];
 
@@ -532,10 +536,10 @@
 
 						sphere.userData.velocity.multiplyScalar( 0.998 );
 
 						sphere.userData.velocity.multiplyScalar( 0.998 );
 
 						pos.add( sphere.userData.velocity );
 
 						pos.add( sphere.userData.velocity );
 
 
 
-						 
+			
 
 
-						let decal = 0.001;
 
-						let limit = BOUNDS_HALF-0.2;
 
+						const decal = 0.001;
 
+						const limit = BOUNDS_HALF - 0.2;
 
 
 
 						if ( pos.x < - limit ) {
 
 						if ( pos.x < - limit ) {
 
 
 
@@ -563,18 +567,18 @@
 
 
 
 						// duck orientation test
 
 						// duck orientation test
 
 
 
-						let startNormal = new THREE.Vector3(pixels[ 1 ], 1, - pixels[ 2 ] ).normalize();
 
-				
-						let dir = startPos.sub(pos);
 
+						const startNormal = new THREE.Vector3( pixels[ 1 ], 1, - pixels[ 2 ] ).normalize();
 
+			
+						const dir = startPos.sub( pos );
 
 						dir.y = 0;
 
 						dir.y = 0;
 
 						dir.normalize();
 
 						dir.normalize();
 
 
 
-						let yAxis = new THREE.Vector3(0, 1, 0);
 
-						let zAxis = new THREE.Vector3(0, 0, -1);
 
+						const yAxis = new THREE.Vector3( 0, 1, 0 );
 
+						const zAxis = new THREE.Vector3( 0, 0, - 1 );
 
 						tmpQuatX.setFromUnitVectors( zAxis, dir );
 
 						tmpQuatX.setFromUnitVectors( zAxis, dir );
 
 						tmpQuatZ.setFromUnitVectors( yAxis, startNormal );
 
 						tmpQuatZ.setFromUnitVectors( yAxis, startNormal );
 
-						tmpQuat.multiplyQuaternions( tmpQuatZ,tmpQuatX );
 
-						sphere.quaternion.slerp(tmpQuat, 0.017);
 
+						tmpQuat.multiplyQuaternions( tmpQuatZ, tmpQuatX );
 
+						sphere.quaternion.slerp( tmpQuat, 0.017 );
 
 
 
 					}
 
 					}
 
 
 
@@ -591,18 +595,22 @@
 
 
 
 			}
 
 			}
 
 
 
-			function onPointerDown( event ) {
 
+			function onPointerDown() {
 
+
 
 				mousedown = true;
 
 				mousedown = true;
 
+
 
 			}
 
 			}
 
 
 
-			function onPointerUp( event ) {
 
+			function onPointerUp() {
 
+
 
 				mousedown = false;
 
 				mousedown = false;
 
 				controls.enabled = true;
 
 				controls.enabled = true;
 
+			
 			}
 
 			}
 
 
 
 			function onPointerMove( event ) {
 
 			function onPointerMove( event ) {
 
 
 
-				let dom = renderer.domElement;
 
+				const dom = renderer.domElement;
 
 				mouseCoords.set( ( event.clientX / dom.clientWidth ) * 2 - 1, - ( event.clientY / dom.clientHeight ) * 2 + 1 );
 
 				mouseCoords.set( ( event.clientX / dom.clientWidth ) * 2 - 1, - ( event.clientY / dom.clientHeight ) * 2 + 1 );
 
 
 
 			}
 
 			}
 
@@ -621,7 +629,7 @@
 
 
 
 						const point = intersects[ 0 ].point;
 
 						const point = intersects[ 0 ].point;
 
 						uniforms[ 'mousePos' ].value.set( point.x, point.z );
 
 						uniforms[ 'mousePos' ].value.set( point.x, point.z );
 
-						if(controls.enabled) controls.enabled = false;
 
+						if ( controls.enabled ) controls.enabled = false;
 
 
 
 					} else {
 
 					} else {
 
 
 
@@ -639,7 +647,6 @@
 
 
 
 			function animate() {
 
 			function animate() {
 
 
 
-				requestAnimationFrame( animate );
 
 				render();
 
 				render();
 
 				stats.update();
 
 				stats.update();
 
 
 
@@ -649,7 +656,7 @@
 
 
 
 				raycast();
 
 				raycast();
 
 
 
-				frame++
 
+				frame ++;
 
 
 
 				if ( frame >= 7 - effectController.speed ) {
 
 				if ( frame >= 7 - effectController.speed ) {
 
 
 
@@ -660,7 +667,7 @@
 
 					if ( ducksEnabled ) duckDynamics();
 
 					if ( ducksEnabled ) duckDynamics();
 
 
 
 					// Get compute output in custom uniform
 
 					// Get compute output in custom uniform
 
-					if( waterMesh ) waterMesh.material.heightmap = tmpHeightmap;
 
+					if ( waterMesh ) waterMesh.material.heightmap = tmpHeightmap;
 
 
 
 					frame = 0;
 
 					frame = 0;
 
 
 
@@ -692,27 +699,32 @@
 
 					this.extra = {};
 
 					this.extra = {};
 
 
 
 					this.addParametre( 'heightmap', null );
 
 					this.addParametre( 'heightmap', null );
 
-					
+			
 					this.setValues( parameters );
 
 					this.setValues( parameters );
 
 
 
 				}
 
 				}
 
 
 
-				addParametre( name, value ){
 
+				addParametre( name, value ) {
 
 
 
 					this.extra[ name ] = value;
 
 					this.extra[ name ] = value;
 
 					Object.defineProperty( this, name, {
 
 					Object.defineProperty( this, name, {
 
 						get: () => ( this.extra[ name ] ),
 
 						get: () => ( this.extra[ name ] ),
 
 						set: ( v ) => {
 
 						set: ( v ) => {
 
+
 
 							this.extra[ name ] = v;
 
 							this.extra[ name ] = v;
 
-							if( this.userData.shader ) this.userData.shader.uniforms[name].value = this.extra[ name ];
 
+							if ( this.userData.shader ) this.userData.shader.uniforms[ name ].value = this.extra[ name ];
 
+			
 						}
 
 						}
 
-					});
 
+					} );
 
+			
 				}
 
 				}
 
 
 
-				onBeforeCompile( shader ){
 
+				onBeforeCompile( shader ) {
 
+
 
+					for ( const name in this.extra ) {
 
 
 
-					for(let name in this.extra ) {
 
-						shader.uniforms[ name ] = { value: this.extra[name] };
 
+						shader.uniforms[ name ] = { value: this.extra[ name ] };
 
+			
 					}
 
 					}
 
 
 
 					shader.vertexShader = shader.vertexShader.replace( '#include <common>', shaderChange.common );
 
 					shader.vertexShader = shader.vertexShader.replace( '#include <common>', shaderChange.common );
 
@@ -729,8 +741,8 @@
 
 
 
 			const shaderChange = {
 
 			const shaderChange = {
 
 
 
-				heightmap_frag : /* glsl */`
 
-			    #include <common>
 
+				heightmap_frag: /* glsl */`
 
+				#include <common>
 
 
 
 				uniform vec2 mousePos;
 
 				uniform vec2 mousePos;
 
 				uniform float mouseSize;
 
 				uniform float mouseSize;
 
@@ -769,30 +781,30 @@
 
 					gl_FragColor = heightmapValue;
 
 					gl_FragColor = heightmapValue;
 
 
 
 				}
 
 				}
 
-			    `,
 
-			    // FOR MATERIAL
 
-			    common : /* glsl */`
 
+				`,
 
+				// FOR MATERIAL
 
+				common: /* glsl */`
 
 				#include <common>
 
 				#include <common>
 
 				uniform sampler2D heightmap;
 
 				uniform sampler2D heightmap;
 
 				`,
 
 				`,
 
-			    beginnormal_vertex : /* glsl */`
 
-			    vec2 cellSize = vec2( 1.0 / WIDTH, 1.0 / WIDTH );
 
-			    vec3 objectNormal = vec3(
 
+				beginnormal_vertex: /* glsl */`
 
+				vec2 cellSize = vec2( 1.0 / WIDTH, 1.0 / WIDTH );
 
+				vec3 objectNormal = vec3(
 
 				( texture2D( heightmap, uv + vec2( - cellSize.x, 0 ) ).x - texture2D( heightmap, uv + vec2( cellSize.x, 0 ) ).x ) * WIDTH / BOUNDS,
 
 				( texture2D( heightmap, uv + vec2( - cellSize.x, 0 ) ).x - texture2D( heightmap, uv + vec2( cellSize.x, 0 ) ).x ) * WIDTH / BOUNDS,
 
 				( texture2D( heightmap, uv + vec2( 0, - cellSize.y ) ).x - texture2D( heightmap, uv + vec2( 0, cellSize.y ) ).x ) * WIDTH / BOUNDS,
 
 				( texture2D( heightmap, uv + vec2( 0, - cellSize.y ) ).x - texture2D( heightmap, uv + vec2( 0, cellSize.y ) ).x ) * WIDTH / BOUNDS,
 
 				1.0 );
 
 				1.0 );
 
 				#ifdef USE_TANGENT
 
 				#ifdef USE_TANGENT
 
 					vec3 objectTangent = vec3( tangent.xyz );
 
 					vec3 objectTangent = vec3( tangent.xyz );
 
 				#endif
 
 				#endif
 
-			    `,
 
-			    begin_vertex : /* glsl */`
 
-			    float heightValue = texture2D( heightmap, uv ).x;
 
-			    vec3 transformed = vec3( position.x, position.y, heightValue );
 
-			    #ifdef USE_ALPHAHASH
 
+				`,
 
+				begin_vertex: /* glsl */`
 
+				float heightValue = texture2D( heightmap, uv ).x;
 
+				vec3 transformed = vec3( position.x, position.y, heightValue );
 
+				#ifdef USE_ALPHAHASH
 
 					vPosition = vec3( position );
 
 					vPosition = vec3( position );
 
 				#endif
 
 				#endif
 
-			    `,
 
-			}
 
+				`,
 
+			};
 
 
 
 		</script>
 
 		</script>
 
 	</body>
 
 	</body>

+ 98 - 52
examples/webgl_random_uv.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - GLTFloader</title>
 
+		<title>three.js webgl - random - uv</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
@@ -13,10 +13,6 @@
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Random UV and Disolve
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Random UV and Disolve
 
 		</div>
 
 		</div>
 
 
 
-		<!-- Import maps polyfill -->
 
-		<!-- Remove this when import maps will be widely supported -->
 
-		<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
 
-
 
 		<script type="importmap">
 
 		<script type="importmap">
 
 			{
 
 			{
 
 				"imports": {
 
 				"imports": {
 
@@ -61,27 +57,27 @@
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				dirLight = new THREE.DirectionalLight( 0xFFFFFF, 3 );
 
 				dirLight = new THREE.DirectionalLight( 0xFFFFFF, 3 );
 
-				dirLight.position.set( -0.5, 1, 0.8 );
 
+				dirLight.position.set( - 0.5, 1, 0.8 );
 
 				dirLight.castShadow = true;
 
 				dirLight.castShadow = true;
 
 				scene.add( dirLight );
 
 				scene.add( dirLight );
 
-				let shadow = dirLight.shadow;
 
+				const shadow = dirLight.shadow;
 
 				shadow.mapSize.width = shadow.mapSize.height = 1024;
 
 				shadow.mapSize.width = shadow.mapSize.height = 1024;
 
 				shadow.radius = 16;
 
 				shadow.radius = 16;
 
 				shadow.bias = - 0.0005;
 
 				shadow.bias = - 0.0005;
 
-				let shadowCam = shadow.camera, s = 2;
 
+				const shadowCam = shadow.camera, s = 2;
 
 				shadowCam.near = 0.5;
 
 				shadowCam.near = 0.5;
 
 				shadowCam.far = 3;
 
 				shadowCam.far = 3;
 
 				shadowCam.right = shadowCam.top	= s;
 
 				shadowCam.right = shadowCam.top	= s;
 
-				shadowCam.left = shadowCam.bottom = -s;
 
+				shadowCam.left = shadowCam.bottom = - s;
 
 				// debug shadow
 
 				// debug shadow
 
 				//scene.add( new THREE.CameraHelper(shadowCam) );
 
 				//scene.add( new THREE.CameraHelper(shadowCam) );
 
 
 
 				// add ground plane
 
 				// add ground plane
 
-				let plane = new THREE.PlaneGeometry( 2, 2 );
 
-				plane.rotateX( -Math.PI*0.5 );
 
-				ground = new THREE.Mesh( plane, new THREE.ShadowMaterial({opacity:0.5}) );
 
+				const plane = new THREE.PlaneGeometry( 2, 2 );
 
+				plane.rotateX( - Math.PI * 0.5 );
 
+				ground = new THREE.Mesh( plane, new THREE.ShadowMaterial( { opacity: 0.5 } ) );
 
 				ground.receiveShadow = true;
 
 				ground.receiveShadow = true;
 
-				ground.position.z = -0.5;
 
+				ground.position.z = - 0.5;
 
 				scene.add( ground );
 
 				scene.add( ground );
 
 
 
 
 
@@ -89,7 +85,7 @@
 
 				const map = new THREE.TextureLoader().load( 'textures/jade.jpg' );
 
 				const map = new THREE.TextureLoader().load( 'textures/jade.jpg' );
 
 				map.colorSpace = THREE.SRGBColorSpace;
 
 				map.colorSpace = THREE.SRGBColorSpace;
 
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 
-				map.repeat.set(20,20);
 
+				map.repeat.set( 20, 20 );
 
 				map.flipY = false;
 
 				map.flipY = false;
 
 
 
 				const disolveMap = new THREE.TextureLoader().load( 'textures/shaderball_ds.jpg' );
 
 				const disolveMap = new THREE.TextureLoader().load( 'textures/shaderball_ds.jpg' );
 
@@ -117,38 +113,40 @@
 
 						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
 
 						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
 
 						loader.load( 'ShaderBall2.glb', function ( gltf ) {
 
 						loader.load( 'ShaderBall2.glb', function ( gltf ) {
 
 
 
-							const shaderBall = gltf.scene.children[0];
 
+							const shaderBall = gltf.scene.children[ 0 ];
 
 
 
 							// shaderBall is a groop with 3 children : base, inside and logo
 
 							// shaderBall is a groop with 3 children : base, inside and logo
 
 							// ao map is include in model
 
 							// ao map is include in model
 
 
 
 							let i = shaderBall.children.length, n = 0;
 
 							let i = shaderBall.children.length, n = 0;
 
 
 
-							while(i--){
 
-								shaderBall.children[i].receiveShadow = true;
 
-								shaderBall.children[i].castShadow = true;
 
-								shaderBall.children[i].renderOrder = n++
 
+							while ( i -- ) {
 
+
 
+								shaderBall.children[ i ].receiveShadow = true;
 
+								shaderBall.children[ i ].castShadow = true;
 
+								shaderBall.children[ i ].renderOrder = n ++;
 
+			
 							}
 
 							}
 
 
 
-							material = shaderBall.children[0].material;
 
+							material = shaderBall.children[ 0 ].material;
 
 							material.map = map;
 
 							material.map = map;
 
 							material.alphaMap = disolveMap;
 
 							material.alphaMap = disolveMap;
 
 							material.transparent = true;
 
 							material.transparent = true;
 
 
 
-							materialIn = shaderBall.children[1].material;
 
+							materialIn = shaderBall.children[ 1 ].material;
 
 							materialIn.alphaMap = disolveMap;
 
 							materialIn.alphaMap = disolveMap;
 
 							materialIn.transparent = true;
 
 							materialIn.transparent = true;
 
 
 
 							material.onBeforeCompile = function ( shader ) {
 
 							material.onBeforeCompile = function ( shader ) {
 
 
 
-								shader.uniforms['disolve'] = { value: 0 };
 
-								shader.uniforms['threshold'] = { value: 0.2 };
 
+								shader.uniforms[ 'disolve' ] = { value: 0 };
 
+								shader.uniforms[ 'threshold' ] = { value: 0.2 };
 
 
 
-								shader.uniforms['noiseMap'] = { value: noise };
 
-								shader.uniforms['enableRandom'] = { value: 1 };
 
-								shader.uniforms['useNoiseMap'] = { value: 1 };
 
-								shader.uniforms['useSuslikMethod'] = { value: 0 };
 
-								shader.uniforms['debugNoise'] = { value: 0 };
 
+								shader.uniforms[ 'noiseMap' ] = { value: noise };
 
+								shader.uniforms[ 'enableRandom' ] = { value: 1 };
 
+								shader.uniforms[ 'useNoiseMap' ] = { value: 1 };
 
+								shader.uniforms[ 'useSuslikMethod' ] = { value: 0 };
 
+								shader.uniforms[ 'debugNoise' ] = { value: 0 };
 
 
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <clipping_planes_pars_fragment>', '#include <clipping_planes_pars_fragment>' + randomUV );
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <clipping_planes_pars_fragment>', '#include <clipping_planes_pars_fragment>' + randomUV );
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <map_fragment>', mapRemplace );
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <map_fragment>', mapRemplace );
 
@@ -159,19 +157,19 @@
 
 
 
 								uniforms = shader.uniforms;
 
 								uniforms = shader.uniforms;
 
 
 
-							}
 
+							};
 
 
 
 							materialIn.onBeforeCompile = function ( shader ) {
 
 							materialIn.onBeforeCompile = function ( shader ) {
 
 
 
-								shader.uniforms['disolve'] = { value: 0 };
 
-								shader.uniforms['threshold'] = { value: 0.2 };
 
+								shader.uniforms[ 'disolve' ] = { value: 0 };
 
+								shader.uniforms[ 'threshold' ] = { value: 0.2 };
 
 								// for disolve
 
 								// for disolve
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <alphamap_pars_fragment>', alphamap_pars_fragment );
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <alphamap_pars_fragment>', alphamap_pars_fragment );
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <alphamap_fragment>', alphamap_fragment );
 
 								shader.fragmentShader = shader.fragmentShader.replace( '#include <alphamap_fragment>', alphamap_fragment );
 
 
 
 								uniformsIn = shader.uniforms;
 
 								uniformsIn = shader.uniforms;
 
 
 
-							}
 
+							};
 
 
 
 							scene.add( shaderBall );
 
 							scene.add( shaderBall );
 
 
 
@@ -183,7 +181,7 @@
 
 
 
 					} );
 
 					} );
 
 
 
-				;
 
+
 
 
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.addEventListener( 'change', render ); // use if there is no animation loop
 
 				controls.addEventListener( 'change', render ); // use if there is no animation loop
 
@@ -200,32 +198,80 @@
 
 
 
 				const setting = {
 
 				const setting = {
 
 
 
-					get 'Enabled'() { return uniforms.enableRandom.value ? true : false; },
 
-					set 'Enabled'( v ) {  uniforms.enableRandom.value = v ? 1 : 0; render(); },
 
+					get 'Enabled'() {
 
+
 
+						return uniforms.enableRandom.value ? true : false;
 
+
 
+					},
 
+					set 'Enabled'( v ) {
 
+
 
+						uniforms.enableRandom.value = v ? 1 : 0; render();
 
+
 
+					},
 
+
 
+					get 'UseNoiseMap'() {
 
+
 
+						return uniforms.useNoiseMap.value ? true : false;
 
+
 
+					},
 
+					set 'UseNoiseMap'( v ) {
 
+
 
+						uniforms.useNoiseMap.value = v ? 1 : 0; render();
 
+
 
+					},
 
+
 
+					get 'SuslikMethod'() {
 
 
 
-					get 'UseNoiseMap'() { return uniforms.useNoiseMap.value ? true : false; },
 
-					set 'UseNoiseMap'( v ) {  uniforms.useNoiseMap.value = v ? 1 : 0; render(); },
 
+						return uniforms.useSuslikMethod.value ? true : false;
 
 
 
-					get 'SuslikMethod'() { return uniforms.useSuslikMethod.value ? true : false; },
 
-					set 'SuslikMethod'( v ) {  uniforms.useSuslikMethod.value = v ? 1 : 0; render(); },
 
+					},
 
+					set 'SuslikMethod'( v ) {
 
 
 
-					get 'DebugNoise'() { return uniforms.debugNoise.value ? true : false; },
 
-					set 'DebugNoise'( v ) {  uniforms.debugNoise.value = v ? 1 : 0; render(); },
 
+						uniforms.useSuslikMethod.value = v ? 1 : 0; render();
 
+
 
+					},
 
+
 
+					get 'DebugNoise'() {
 
+
 
+						return uniforms.debugNoise.value ? true : false;
 
+
 
+					},
 
+					set 'DebugNoise'( v ) {
 
+
 
+						uniforms.debugNoise.value = v ? 1 : 0; render();
 
+
 
+					},
 
 
 
 					// disolve
 
 					// disolve
 
-					get 'disolve'() { return uniforms.disolve.value; },
 
-					set 'disolve'( v ) {  uniforms.disolve.value = v; uniformsIn.disolve.value = v; ground.material.opacity = (1-v)*0.5; render(); },
 
+					get 'disolve'() {
 
+
 
+						return uniforms.disolve.value;
 
+
 
+					},
 
+					set 'disolve'( v ) {
 
 
 
-					get 'threshold'() { return uniforms.threshold.value; },
 
-					set 'threshold'( v ) {  uniforms.threshold.value = v; uniformsIn.threshold.value = v; render(); }
 
+						uniforms.disolve.value = v; uniformsIn.disolve.value = v; ground.material.opacity = ( 1 - v ) * 0.5; render();
 
+
 
+					},
 
+
 
+					get 'threshold'() {
 
+
 
+						return uniforms.threshold.value;
 
+
 
+					},
 
+					set 'threshold'( v ) {
 
+
 
+						uniforms.threshold.value = v; uniformsIn.threshold.value = v; render();
 
+
 
+					}
 
 
 
 				};
 
 				};
 
 
 
 				gui = new GUI();
 
 				gui = new GUI();
 
-				gui.add( material, 'roughness', 0, 1, 0.01 ).onChange(render);
 
-				gui.add( material, 'metalness', 0, 1, 0.01 ).onChange(render);
 
-				gui.add( setting, 'disolve', 0, 1, 0.01 ).onChange(render);
 
-				gui.add( setting, 'threshold', 0, 1, 0.01 ).onChange(render);
 
+				gui.add( material, 'roughness', 0, 1, 0.01 ).onChange( render );
 
+				gui.add( material, 'metalness', 0, 1, 0.01 ).onChange( render );
 
+				gui.add( setting, 'disolve', 0, 1, 0.01 ).onChange( render );
 
+				gui.add( setting, 'threshold', 0, 1, 0.01 ).onChange( render );
 
 				gui.add( setting, 'Enabled' );
 
 				gui.add( setting, 'Enabled' );
 
 				gui.add( setting, 'UseNoiseMap' );
 
 				gui.add( setting, 'UseNoiseMap' );
 
 				gui.add( setting, 'SuslikMethod' );
 
 				gui.add( setting, 'SuslikMethod' );
 
@@ -313,7 +359,7 @@
 
 			    // interpolate between the two virtual patterns    
 			    // interpolate between the two virtual patterns    
 			    return mix( cola, colb, smoothstep(0.2,0.8,f-0.1*sum(cola-colb)) );
 
 			    return mix( cola, colb, smoothstep(0.2,0.8,f-0.1*sum(cola-colb)) );
 
 
 
-			}`
 
+			}`;
 
 
 
 			const mapRemplace = /* glsl */ `
 
 			const mapRemplace = /* glsl */ `
 
 			#ifdef USE_MAP
 
 			#ifdef USE_MAP
 
@@ -322,7 +368,7 @@
 
 				else diffuseColor *= texture2D( map, vMapUv );
 
 				else diffuseColor *= texture2D( map, vMapUv );
 
 
 
 			#endif
 
 			#endif
 
-			`
 
+			`;
 
 
 
 			const alphamap_pars_fragment = /* glsl */ `
 
 			const alphamap_pars_fragment = /* glsl */ `
 
 			#ifdef USE_ALPHAMAP
 
 			#ifdef USE_ALPHAMAP
 
@@ -339,7 +385,7 @@
 
 			    float mixf = clamp((vv - r)*(1.0/threshold), 0.0, 1.0);
 
 			    float mixf = clamp((vv - r)*(1.0/threshold), 0.0, 1.0);
 
 				diffuseColor.a = mixf;
 
 				diffuseColor.a = mixf;
 
 			#endif
 
 			#endif
 
-			`
 
+			`;
 
 
 
 		</script>
 
 		</script>

+ 96 - 91
examples/webgl_watch.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - GLTFloader</title>
 
+		<title>three.js webgl - watch</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
@@ -13,10 +13,6 @@
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Rolex + aomap - 610 ko
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Rolex + aomap - 610 ko
 
 		</div>
 
 		</div>
 
 
 
-		<!-- Import maps polyfill -->
 
-		<!-- Remove this when import maps will be widely supported -->
 
-		<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
 
-
 
 		<script type="importmap">
 
 		<script type="importmap">
 
 			{
 
 			{
 
 				"imports": {
 
 				"imports": {
 
@@ -46,7 +42,7 @@
 
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 
 			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
 
 			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
 
 
 
-			let composer, camera, scene, renderer; 
+			let composer, camera, scene, renderer;
 
 			let gui, dirLight, pointLight, controls, bloomPass, fxaaPass;
 
 			let gui, dirLight, pointLight, controls, bloomPass, fxaaPass;
 
 			let ready = false;
 
 			let ready = false;
 
 
 
@@ -55,30 +51,30 @@
 
 			const torad = Math.PI / 180;
 
 			const torad = Math.PI / 180;
 
 
 
 			const setting = {
 
 			const setting = {
 
-				roughness:0.09,
 
-				metalness:1.0,
 
-				opacity:0.4,
 
+				roughness: 0.09,
 
+				metalness: 1.0,
 
+				opacity: 0.4,
 
 				threshold: 0,
 
 				threshold: 0,
 
 				strength: 0.08,
 
 				strength: 0.08,
 
 				radius: 0.0,
 
 				radius: 0.0,
 
-				postProcess:false
 
-			}
 
+				postProcess: false
 
+			};
 
 
 
 			init();
 
 			init();
 
-			render();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
 				const container = document.getElementById( 'container' );
 
 				const container = document.getElementById( 'container' );
 
 
 
 				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 20 );
 
 				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 20 );
 
-				camera.position.set(  0.8, 0.5, -1.5 );
 
+				camera.position.set( 0.8, 0.5, - 1.5 );
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha:false } );
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setAnimationLoop( animate );
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				renderer.toneMappingExposure = 0.7;
 
 				renderer.toneMappingExposure = 0.7;
 
 				renderer.shadowMap.enabled = true;
 
 				renderer.shadowMap.enabled = true;
 
@@ -96,90 +92,93 @@
 
 						scene.backgroundIntensity = 1.0;
 
 						scene.backgroundIntensity = 1.0;
 
 						scene.environmentIntensity = 1.5;
 
 						scene.environmentIntensity = 1.5;
 
 
 
-						render();
 
-
 
 						// model
 
 						// model
 
 
 
 						const loader = new GLTFLoader().setPath( 'models/gltf/' );
 
 						const loader = new GLTFLoader().setPath( 'models/gltf/' );
 
 						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
 
 						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
 
 						loader.load( 'rolex.glb', function ( gltf ) {
 
 						loader.load( 'rolex.glb', function ( gltf ) {
 
 
 
-							gltf.scene.rotation.x = Math.PI*0.25
 
+							gltf.scene.rotation.x = Math.PI * 0.25;
 
 
 
 							gltf.scene.traverse( ( child ) => {
 
 							gltf.scene.traverse( ( child ) => {
 
 
 
-								if ( child.isMesh || child.isGroup ){
 
-									if ( child.isMesh ){ 
+								if ( child.isMesh || child.isGroup ) {
 
+
 
+									if ( child.isMesh ) {
 
+
 
 										child.material.vertexColors = false;
 
 										child.material.vertexColors = false;
 
-										materials[child.material.name] = child.material;
 
-										if(child.name!=='glass'){
 
+										materials[ child.material.name ] = child.material;
 
+										if ( child.name !== 'glass' ) {
 
+
 
 											child.receiveShadow = true;
 
 											child.receiveShadow = true;
 
 										    child.castShadow = true;
 
 										    child.castShadow = true;
 
+			
 										}
 
 										}
 
+			
 									}
 
 									}
 
-									meshs[child.name] = child;
 
+
 
+									meshs[ child.name ] = child;
 
+			
 								}
 
 								}
 
-							})
 
+			
+							} );
 
 
 
 							scene.add( gltf.scene );
 
 							scene.add( gltf.scene );
 
 
 
-							meshs.glass.material = new THREE.MeshPhysicalMaterial({
 
-								color:0x020205,
 
-								transparent:true, opacity:setting.opacity, 
-								metalness:0, roughness:0,
 
-								iridescence:0.3, 
-								clearcoat:1.0,
 
-								blending:THREE.AdditiveBlending
 
-							})
 
+							meshs.glass.material = new THREE.MeshPhysicalMaterial( {
 
+								color: 0x020205,
 
+								transparent: true, opacity: setting.opacity,
 
+								metalness: 0, roughness: 0,
 
+								iridescence: 0.3,
 
+								clearcoat: 1.0,
 
+								blending: THREE.AdditiveBlending
 
+							} );
 
 
 
 							ready = true;
 
 							ready = true;
 
 
 
-							createGUI()
 
+							createGUI();
 
 
 
 						} );
 
 						} );
 
 
 
 					} );
 
 					} );
 
 
 
-				;
 
+
 
 
 
 				controls = new OrbitControls( camera, renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.minDistance = 0.3;
 
 				controls.minDistance = 0.3;
 
 				controls.maxDistance = 10;
 
 				controls.maxDistance = 10;
 
-				controls.target.set( 0, -0.1, 0 );
 
+				controls.target.set( 0, - 0.1, 0 );
 
 				controls.enableDamping = true;
 
 				controls.enableDamping = true;
 
 				controls.dampingFactor = 0.05;
 
 				controls.dampingFactor = 0.05;
 
 				controls.update();
 
 				controls.update();
 
 
 
 				dirLight = new THREE.DirectionalLight( 0xFFFFFF, 6 );
 
 				dirLight = new THREE.DirectionalLight( 0xFFFFFF, 6 );
 
-				dirLight.position.set( -0.1, 0.6, 0.4 );
 
+				dirLight.position.set( - 0.1, 0.6, 0.4 );
 
 				dirLight.castShadow = true;
 
 				dirLight.castShadow = true;
 
 				scene.add( dirLight );
 
 				scene.add( dirLight );
 
-				let shadow = dirLight.shadow;
 
+				const shadow = dirLight.shadow;
 
 				shadow.mapSize.width = shadow.mapSize.height = 1024;
 
 				shadow.mapSize.width = shadow.mapSize.height = 1024;
 
 				shadow.radius = 8;
 
 				shadow.radius = 8;
 
 				shadow.bias = - 0.0005;
 
 				shadow.bias = - 0.0005;
 
-				let shadowCam = shadow.camera, s = 0.5;
 
+				const shadowCam = shadow.camera, s = 0.5;
 
 				shadowCam.near = 0.1;
 
 				shadowCam.near = 0.1;
 
 				shadowCam.far = 2;
 
 				shadowCam.far = 2;
 
 				shadowCam.right = shadowCam.top	= s;
 
 				shadowCam.right = shadowCam.top	= s;
 
-				shadowCam.left = shadowCam.bottom = -s;
 
+				shadowCam.left = shadowCam.bottom = - s;
 
 				// debug shadow
 
 				// debug shadow
 
 				//scene.add(  new THREE.CameraHelper(shadowCam) );
 
 				//scene.add(  new THREE.CameraHelper(shadowCam) );
 
-				
-
 
+			
 				pointLight = new THREE.PointLight( 0x7b8cad, 1, 0, 2 );
 
 				pointLight = new THREE.PointLight( 0x7b8cad, 1, 0, 2 );
 
-				pointLight.position.set(0.3, -0.2, -0.2);
 
+				pointLight.position.set( 0.3, - 0.2, - 0.2 );
 
 				scene.add( pointLight );
 
 				scene.add( pointLight );
 
 
 
-				
-
 
 				window.addEventListener( 'resize', onWindowResize );
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
 
 				moveCamera();
 
 				moveCamera();
 
 
 
 			}
 
 			}
 
 
 
-			function moveCamera(){
 
+			function moveCamera() {
 
 
 
 				controls.enabled = false;
 
 				controls.enabled = false;
 
 				controls.enableDamping = false;
 
 				controls.enableDamping = false;
 
@@ -187,32 +186,36 @@
 
 				const sph = new THREE.Spherical();
 
 				const sph = new THREE.Spherical();
 
 				const target = controls.target;
 
 				const target = controls.target;
 
 				const tmp = {
 
 				const tmp = {
 
-				    distance:controls.getDistance(),
 
-				    phi:controls.getPolarAngle(),
 
+				    distance: controls.getDistance(),
 
+				    phi: controls.getPolarAngle(),
 
 				    theta: controls.getAzimuthalAngle()
 
 				    theta: controls.getAzimuthalAngle()
 
-				}
 
+				};
 
 
 
 				new TWEEN.Tween( tmp )
 
 				new TWEEN.Tween( tmp )
 
-					.to( { distance:1, theta: -Math.PI*0.2 }, 6000 )
 
+					.to( { distance: 1, theta: - Math.PI * 0.2 }, 6000 )
 
 					.easing( TWEEN.Easing.Quadratic.Out )
 
 					.easing( TWEEN.Easing.Quadratic.Out )
 
-					.onUpdate( function( n ) { 
-					   sph.set( n.distance, n.phi, n.theta );
 
-					   camera.position.setFromSpherical( sph ).add( target )
 
-					   camera.lookAt( target )
 
-					})
 
-					.onComplete( function() { 
+					.onUpdate( function ( n ) {
 
+
 
+						sph.set( n.distance, n.phi, n.theta );
 
+						camera.position.setFromSpherical( sph ).add( target );
 
+						camera.lookAt( target );
 
+
 
+					} )
 
+					.onComplete( function () {
 
+
 
 						controls.enabled = true;
 
 						controls.enabled = true;
 
 						controls.enableDamping = true;
 
 						controls.enableDamping = true;
 
-					})
 
+
 
+					} )
 
 					.start();
 
 					.start();
 
 
 
 			}
 
 			}
 
 
 
-			function postProcess ( b ) {
 
+			function postProcess( b ) {
 
 
 
-				if(b){
 
+				if ( b ) {
 
 
 
-					if( composer ) return;
 
+					if ( composer ) return;
 
 
 
 					const renderPass = new RenderPass( scene, camera );
 
 					const renderPass = new RenderPass( scene, camera );
 
 					const outputPass = new OutputPass();
 
 					const outputPass = new OutputPass();
 
@@ -221,14 +224,14 @@
 
 					bloomPass.threshold = setting.threshold;
 
 					bloomPass.threshold = setting.threshold;
 
 					bloomPass.strength = setting.strength;
 
 					bloomPass.strength = setting.strength;
 
 					bloomPass.radius = setting.radius;
 
 					bloomPass.radius = setting.radius;
 
-					
+			
 					fxaaPass = new ShaderPass( FXAAShader );
 
 					fxaaPass = new ShaderPass( FXAAShader );
 
 					const pixelRatio = renderer.getPixelRatio();
 
 					const pixelRatio = renderer.getPixelRatio();
 
 					fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( window.innerWidth * pixelRatio ), 1 / ( window.innerHeight * pixelRatio ) );
 
 					fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( window.innerWidth * pixelRatio ), 1 / ( window.innerHeight * pixelRatio ) );
 
 
 
 					composer = new EffectComposer( renderer );
 
 					composer = new EffectComposer( renderer );
 
 					composer.setPixelRatio( pixelRatio );
 
 					composer.setPixelRatio( pixelRatio );
 
-					
+			
 					composer.addPass( renderPass );
 
 					composer.addPass( renderPass );
 
 					composer.addPass( bloomPass );
 
 					composer.addPass( bloomPass );
 
 					composer.addPass( fxaaPass );
 
 					composer.addPass( fxaaPass );
 
@@ -238,7 +241,7 @@
 
 
 
 				} else {
 
 				} else {
 
 
 
-					if(!composer) return;
 
+					if ( ! composer ) return;
 
 					composer.dispose();
 
 					composer.dispose();
 
 					composer = null;
 
 					composer = null;
 
 					bloomPass = null;
 
 					bloomPass = null;
 
@@ -251,17 +254,17 @@
 
 			function createGUI() {
 
 			function createGUI() {
 
 
 
 				gui = new GUI();
 
 				gui = new GUI();
 
-				gui.add( setting, 'roughness', 0, 1, 0.01 ).onChange(upMaterial);
 
-				gui.add( setting, 'metalness', 0, 1, 0.01 ).onChange(upMaterial);
 
-				gui.add( setting, 'opacity', 0, 1, 0.01 ).onChange(upMaterial);
 
+				gui.add( setting, 'roughness', 0, 1, 0.01 ).onChange( upMaterial );
 
+				gui.add( setting, 'metalness', 0, 1, 0.01 ).onChange( upMaterial );
 
+				gui.add( setting, 'opacity', 0, 1, 0.01 ).onChange( upMaterial );
 
 
 
 				//
 
 				//
 
 
 
-				gui.add( setting, 'postProcess' ).onChange(postProcess);
 
-				gui.add( setting, 'threshold', 0, 1, 0.01 ).onChange(upBloom);
 
-				gui.add( setting, 'strength', 0, 3, 0.01 ).onChange(upBloom);
 
-				gui.add( setting, 'radius', 0, 1, 0.01 ).onChange(upBloom);
 
-				
+				gui.add( setting, 'postProcess' ).onChange( postProcess );
 
+				gui.add( setting, 'threshold', 0, 1, 0.01 ).onChange( upBloom );
 
+				gui.add( setting, 'strength', 0, 3, 0.01 ).onChange( upBloom );
 
+				gui.add( setting, 'radius', 0, 1, 0.01 ).onChange( upBloom );
 
+			
 			}
 
 			}
 
 
 
 			function upMaterial() {
 
 			function upMaterial() {
 
@@ -274,7 +277,7 @@
 
 
 
 			function upBloom() {
 
 			function upBloom() {
 
 
 
-				if( !bloomPass ) return;
 
+				if ( ! bloomPass ) return;
 
 				bloomPass.threshold = setting.threshold;
 
 				bloomPass.threshold = setting.threshold;
 
 				bloomPass.strength = setting.strength;
 
 				bloomPass.strength = setting.strength;
 
 				bloomPass.radius = setting.radius;
 
 				bloomPass.radius = setting.radius;
 
@@ -285,20 +288,20 @@
 
 
 
 				const currentDate = new Date();
 
 				const currentDate = new Date();
 
 				let hour = currentDate.getHours();
 
 				let hour = currentDate.getHours();
 
-				let minute = currentDate.getMinutes();
 
-				let second = currentDate.getSeconds();
 
+				const minute = currentDate.getMinutes();
 
+				const second = currentDate.getSeconds();
 
 				let day = currentDate.getDay();
 
 				let day = currentDate.getDay();
 
-				let mounth = currentDate.getMonth();
 
-				let mili = currentDate.getMilliseconds()
 
-				if(hour >= 12 ) hour-=12
 
-				if(day > 30 ) day=30
 
-
 
-				meshs.hour.rotation.y = -hour*30 * torad
 
-				meshs.minute.rotation.y = -minute * 6 * torad;
 
-				meshs.second.rotation.y = -second * 6 * torad;
 
-				meshs.mini_03.rotation.y = -day * 12 * torad;
 
-				meshs.mini_02.rotation.y = -mounth * 30 * torad;
 
-				meshs.mini_01.rotation.y = -mili * 0.36 * torad;
 
+				const mounth = currentDate.getMonth();
 
+				const mili = currentDate.getMilliseconds();
 
+				if ( hour >= 12 ) hour -= 12;
 
+				if ( day > 30 ) day = 30;
 
+
 
+				meshs.hour.rotation.y = - hour * 30 * torad;
 
+				meshs.minute.rotation.y = - minute * 6 * torad;
 
+				meshs.second.rotation.y = - second * 6 * torad;
 
+				meshs.mini_03.rotation.y = - day * 12 * torad;
 
+				meshs.mini_02.rotation.y = - mounth * 30 * torad;
 
+				meshs.mini_01.rotation.y = - mili * 0.36 * torad;
 
 
 
 			}
 
 			}
 
 
 
@@ -310,30 +313,32 @@
 
 				camera.aspect = width / height;
 
 				camera.aspect = width / height;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
 
 				renderer.setSize( width, height );
 
-				if( composer ){ 
+				if ( composer ) {
 
+
 
 					composer.setSize( width, height );
 
 					composer.setSize( width, height );
 
-					if(fxaaPass){
 
+					if ( fxaaPass ) {
 
+
 
 						const pr = renderer.getPixelRatio();
 
 						const pr = renderer.getPixelRatio();
 
 						fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( width * pr ), 1 / ( height * pr ) );
 
 						fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( width * pr ), 1 / ( height * pr ) );
 
+			
 					}
 
 					}
 
-					
+			
 				}
 
 				}
 
 
 
 			}
 
 			}
 
 
 
 			//
 
 			//
 
 
 
-			function render() {
 
+			function animate() {
 
 
 
-				requestAnimationFrame( render );
 
 				controls.update();
 
 				controls.update();
 
 
 
 				TWEEN.update();
 
 				TWEEN.update();
 
-				
-				if( composer ) composer.render();
 
+			
+				if ( composer ) composer.render();
 
 				else renderer.render( scene, camera );
 
 				else renderer.render( scene, camera );
 
 
 
-				if(ready) getTime()
 
+				if ( ready ) getTime();
 
 
 
 			}
 
 			}

粤ICP备19079148号