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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - GLTFloader</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>

		<!-- 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">
			{
				"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 { RGBELoader } from 'three/addons/loaders/RGBELoader.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();
			render();

			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, alpha:false } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 0.7;
				renderer.shadowMap.enabled = true;
				renderer.shadowMap.type = THREE.VSMShadowMap;
				container.appendChild( renderer.domElement );

				new RGBELoader()
					.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;

						render();

						// 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 );
				let shadow = dirLight.shadow;
				shadow.mapSize.width = shadow.mapSize.height = 1024;
				shadow.radius = 8;
				shadow.bias = - 0.0005;
				let 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();
				let minute = currentDate.getMinutes();
				let second = currentDate.getSeconds();
				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;

			}

			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 render() {

				requestAnimationFrame( render );
				controls.update();

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

				if(ready) getTime()

			}

		</script>

	</body>
</html>