samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - watch</title>
		<meta charset="utf-8">
		<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">
	</head>

	<body>
		<div id="container"></div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Rolex + aomap - 610 ko
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/",
					"tween": "./jsm/libs/tween.module.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';
			import * as TWEEN from 'tween';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';

			let composer, camera, scene, renderer;
			let gui, dirLight, pointLight, controls, bloomPass, fxaaPass;
			let ready = false;

			const meshs = {};
			const materials = {};
			const torad = Math.PI / 180;

			const setting = {
				roughness: 0.09,
				metalness: 1.0,
				opacity: 0.4,
				threshold: 0,
				strength: 0.08,
				radius: 0.0,
				postProcess: false
			};

			init();

			function init() {

				const container = document.getElementById( 'container' );

				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 20 );
				camera.position.set( 0.8, 0.5, - 1.5 );

				scene = new THREE.Scene();

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setAnimationLoop( animate );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 0.7;
				renderer.shadowMap.enabled = true;
				renderer.shadowMap.type = THREE.VSMShadowMap;
				container.appendChild( renderer.domElement );

				new HDRLoader()
					.setPath( 'textures/equirectangular/' )
					.load( 'lobe.hdr', function ( texture ) {

						texture.mapping = THREE.EquirectangularReflectionMapping;
						scene.background = texture;
						scene.environment = texture;
						scene.backgroundBlurriness = 0.5;
						scene.backgroundIntensity = 1.0;
						scene.environmentIntensity = 1.5;

						// model

						const loader = new GLTFLoader().setPath( 'models/gltf/' );
						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
						loader.load( 'rolex.glb', function ( gltf ) {

							gltf.scene.rotation.x = Math.PI * 0.25;

							gltf.scene.traverse( ( child ) => {

								if ( child.isMesh || child.isGroup ) {

									if ( child.isMesh ) {

										child.material.vertexColors = false;
										materials[ child.material.name ] = child.material;
										if ( child.name !== 'glass' ) {

											child.receiveShadow = true;
										    child.castShadow = true;

										}

									}

									meshs[ child.name ] = child;

								}

							} );

							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
							} );

							ready = true;

							createGUI();

						} );

					} );


				controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 0.3;
				controls.maxDistance = 10;
				controls.target.set( 0, - 0.1, 0 );
				controls.enableDamping = true;
				controls.dampingFactor = 0.05;
				controls.update();

				dirLight = new THREE.DirectionalLight( 0xFFFFFF, 6 );
				dirLight.position.set( - 0.1, 0.6, 0.4 );
				dirLight.castShadow = true;
				scene.add( dirLight );
				const shadow = dirLight.shadow;
				shadow.mapSize.width = shadow.mapSize.height = 1024;
				shadow.radius = 8;
				shadow.bias = - 0.0005;
				const shadowCam = shadow.camera, s = 0.5;
				shadowCam.near = 0.1;
				shadowCam.far = 2;
				shadowCam.right = shadowCam.top	= s;
				shadowCam.left = shadowCam.bottom = - s;
				// debug shadow
				//scene.add(  new THREE.CameraHelper(shadowCam) );

				pointLight = new THREE.PointLight( 0x7b8cad, 1, 0, 2 );
				pointLight.position.set( 0.3, - 0.2, - 0.2 );
				scene.add( pointLight );

				window.addEventListener( 'resize', onWindowResize );

				moveCamera();

			}

			function moveCamera() {

				controls.enabled = false;
				controls.enableDamping = false;

				const sph = new THREE.Spherical();
				const target = controls.target;
				const tmp = {
				    distance: controls.getDistance(),
				    phi: controls.getPolarAngle(),
				    theta: controls.getAzimuthalAngle()
				};

				new TWEEN.Tween( tmp )
					.to( { distance: 1, theta: - Math.PI * 0.2 }, 6000 )
					.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 () {

						controls.enabled = true;
						controls.enableDamping = true;

					} )
					.start();

			}

			function postProcess( b ) {

				if ( b ) {

					if ( composer ) return;

					const renderPass = new RenderPass( scene, camera );
					const outputPass = new OutputPass();

					bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
					bloomPass.threshold = setting.threshold;
					bloomPass.strength = setting.strength;
					bloomPass.radius = setting.radius;

					fxaaPass = new ShaderPass( FXAAShader );
					const pixelRatio = renderer.getPixelRatio();
					fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( window.innerWidth * pixelRatio ), 1 / ( window.innerHeight * pixelRatio ) );

					composer = new EffectComposer( renderer );
					composer.setPixelRatio( pixelRatio );

					composer.addPass( renderPass );
					composer.addPass( bloomPass );
					composer.addPass( fxaaPass );
					composer.addPass( outputPass );
					composer.addPass( fxaaPass );
					composer.addPass( fxaaPass );

				} else {

					if ( ! composer ) return;
					composer.dispose();
					composer = null;
					bloomPass = null;
					fxaaPass = null;

				}

			}

			function createGUI() {

				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, '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() {

				materials.Gold.metalness = materials.Silver.metalness = setting.metalness;
				materials.Gold.roughness = materials.Silver.roughness = setting.roughness;
				meshs.glass.material.opacity = setting.opacity;

			}

			function upBloom() {

				if ( ! bloomPass ) return;
				bloomPass.threshold = setting.threshold;
				bloomPass.strength = setting.strength;
				bloomPass.radius = setting.radius;

			}

			function getTime() {

				const currentDate = new Date();
				let hour = currentDate.getHours();
				const minute = currentDate.getMinutes();
				const second = currentDate.getSeconds();
				let day = currentDate.getDay();
				const month = currentDate.getMonth();
				const milli = 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 = - month * 30 * torad;
				meshs.mini_01.rotation.y = - milli * 0.36 * torad;

			}

			function onWindowResize() {

				const width = window.innerWidth;
				const height = window.innerHeight;

				camera.aspect = width / height;
				camera.updateProjectionMatrix();
				renderer.setSize( width, height );
				if ( composer ) {

					composer.setSize( width, height );
					if ( fxaaPass ) {

						const pr = renderer.getPixelRatio();
						fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( width * pr ), 1 / ( height * pr ) );

					}

				}

			}

			//

			function animate() {

				controls.update();

				TWEEN.update();

				if ( composer ) composer.render();
				else renderer.render( scene, camera );

				if ( ready ) getTime();

			}

		</script>

	</body>
</html>