홈 탐색 도움말
로그인
javascript
/
three.js
의 미러 https://github.com/tazdij/three.js.git
2
0
포크 0
파일 이슈 0 위키
소스 검색

Examples: Clean up. (#24367)

Michael Herzog 3 년 전
부모
da167b1386
커밋
baa9338424
5개의 변경된 파일과 209개의 추가작업 그리고 334개의 파일을 삭제
통합 보기 변경상태 보기
  1. 1 1
      examples/files.json
  2. BIN
      examples/screenshots/webgl_materials_envmaps_ground-projected.jpg
  3. BIN
      examples/screenshots/webgl_materials_envmaps_groundprojected.jpg
  4. 0 333
      examples/webgl_materials_envmaps_ground-projected.html
  5. 208 0
      examples/webgl_materials_envmaps_groundprojected.html

+ 1 - 1
examples/files.json
파일 보기 

@@ -141,7 +141,7 @@
 
 		"webgl_materials_displacementmap",
 
 		"webgl_materials_displacementmap",
 
 		"webgl_materials_envmaps",
 
 		"webgl_materials_envmaps",
 
 		"webgl_materials_envmaps_exr",
 
 		"webgl_materials_envmaps_exr",
 
-		"webgl_materials_envmaps_ground-projected",
 
+		"webgl_materials_envmaps_groundprojected",
 
 		"webgl_materials_envmaps_hdr",
 
 		"webgl_materials_envmaps_hdr",
 
 		"webgl_materials_lightmap",
 
 		"webgl_materials_lightmap",
 
 		"webgl_materials_matcap",
 
 		"webgl_materials_matcap",

BIN
examples/screenshots/webgl_materials_envmaps_ground-projected.jpg
파일 보기


BIN
examples/screenshots/webgl_materials_envmaps_groundprojected.jpg
파일 보기


+ 0 - 333
examples/webgl_materials_envmaps_ground-projected.html
파일 보기 

@@ -1,333 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>
 
-			threejs webgl - materials - ground projected environment mapping
 
-		</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">threejs</a> -
 
-			Ground projected environment mapping. By
 
-			<a href="https://twitter.com/CantBeFaraz" target="_blank" rel="noopener"
 
-				>Faraz Shaikh</a
 
-			>.
 
-			<br> 
-			Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
 
-		</div>
 
-
 
-		<!-- Import maps polyfill -->
 
-		<!-- Remove this when import maps will be widely supported -->
 
-		<script
 
-			async
 
-			src="https://unpkg.com/[email protected]/dist/es-module-shims.js"
 
-		></script>
 
-
 
-		<script type="importmap">
 
-			{
 
-				"imports": {
 
-					"three": "../build/three.module.js"
 
-				}
 
-			}
 
-		</script>
 
-
 
-		<script type="module">
 
-			import * as THREE from 'three';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			import { GroundProjectedEnv } from './jsm/objects/GroundProjectedEnv.js';
 
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
-			import { FlakesTexture } from './jsm/textures/FlakesTexture.js';
 
-
 
-			const params = {
 
-				height: 34,
 
-				radius: 440,
 
-				toneMappingExposure: 1
 
-			};
 
-
 
-			let camera, scene, renderer, stats, env,dirLight;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				initScene();
 
-				initMisc();
 
-
 
-				document.body.appendChild( renderer.domElement );
 
-				window.addEventListener( 'resize', onWindowResize );
 
-			
-			}
 
-
 
-			function initScene() {
 
-
 
-				camera = new THREE.PerspectiveCamera(
 
-					45,
 
-					window.innerWidth / window.innerHeight,
 
-					1,
 
-					1000
 
-				);
 
-				camera.position.set( - 1, 0.3, 1 ).multiplyScalar( 25 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				dirLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
 
-				dirLight.position.set( 10, 8, 10 );
 
-				dirLight.castShadow = true;
 
-				dirLight.shadow.camera.near = 1;
 
-				dirLight.shadow.camera.far = 100;
 
-				dirLight.shadow.camera.right = 150;
 
-				dirLight.shadow.camera.left = - 150;
 
-				dirLight.shadow.camera.top = 150;
 
-				dirLight.shadow.camera.bottom = - 150;
 
-				dirLight.shadow.mapSize.width = 1024;
 
-				dirLight.shadow.mapSize.height = 1024;
 
-				scene.add( dirLight );
 
-
 
-				const geometry = new THREE.PlaneGeometry( 1, 1 );
 
-				const material = new THREE.ShadowMaterial( { opacity: 0.3 } );
 
-
 
-				const ground = new THREE.Mesh( geometry, material );
 
-				ground.scale.setScalar( 1000 );
 
-				ground.rotation.x = - Math.PI / 2;
 
-				ground.position.y = - 0.001;
 
-				ground.castShadow = false;
 
-				ground.receiveShadow = true;
 
-				scene.add( ground );
 
-
 
-				const cubeLoader = new THREE.CubeTextureLoader();
 
-				cubeLoader.setPath( 'textures/cube/lake/' );
 
-
 
-				const textureCube = cubeLoader.load( [
 
-					'px.png',
 
-					'nx.png',
 
-					'py.png',
 
-					'ny.png',
 
-					'pz.png',
 
-					'nz.png',
 
-				] );
 
-
 
-				env = new GroundProjectedEnv( textureCube );
 
-				env.scale.setScalar( 100 );
 
-				scene.add( env );
 
-
 
-				scene.background = textureCube;
 
-				scene.environment = textureCube;
 
-
 
-				const dracoLoader = new DRACOLoader();
 
-				dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
-
 
-				const loader = new GLTFLoader();
 
-				loader.setDRACOLoader( dracoLoader );
 
-
 
-				const normalMap3 = new THREE.CanvasTexture( new FlakesTexture() );
 
-				normalMap3.wrapS = THREE.RepeatWrapping;
 
-				normalMap3.wrapT = THREE.RepeatWrapping;
 
-				normalMap3.repeat.x = 10;
 
-				normalMap3.repeat.y = 6;
 
-				normalMap3.anisotropy = 16;
 
-
 
-				const bodyMaterial = new THREE.MeshPhysicalMaterial( {
 
-					clearcoat: 1.0,
 
-					clearcoatRoughness: 0.1,
 
-					metalness: 1,
 
-					roughness: 0.4,
 
-					color: 0xff2800,
 
-					normalMap: normalMap3,
 
-					normalScale: new THREE.Vector2( 0.15, 0.15 ),
 
-				} );
 
-
 
-				const wheelMaterial = new THREE.MeshPhysicalMaterial( {
 
-					clearcoat: 1.0,
 
-					clearcoatRoughness: 0.1,
 
-					metalness: 0.9,
 
-					roughness: 0.5,
 
-					color: '#080808',
 
-					normalMap: normalMap3,
 
-					normalScale: new THREE.Vector2( 0.15, 0.15 ),
 
-				} );
 
-
 
-				const yellowMaterial = new THREE.MeshPhysicalMaterial( {
 
-					clearcoat: 1.0,
 
-					clearcoatRoughness: 0.1,
 
-					metalness: 1,
 
-					roughness: 0.2,
 
-					color: '#e66b00',
 
-				} );
 
-
 
-				const lightsMaterial = new THREE.MeshPhysicalMaterial( {
 
-					emissive: '#ffffff',
 
-					color: 'white',
 
-				} );
 
-
 
-				const chromeMaterial = new THREE.MeshPhysicalMaterial( {
 
-					clearcoat: 1.0,
 
-					clearcoatRoughness: 0.1,
 
-					metalness: 0.9,
 
-					roughness: 0.5,
 
-					color: 0xffffff,
 
-				} );
 
-
 
-				const detailsMaterial = new THREE.MeshStandardMaterial( {
 
-					clearcoat: 1.0,
 
-					clearcoatRoughness: 0.1,
 
-					metalness: 0.9,
 
-					roughness: 0.5,
 
-					color: 0xffffff,
 
-				} );
 
-
 
-				const glassMaterial = new THREE.MeshPhysicalMaterial( {
 
-					color: 0xffffff,
 
-					metalness: 0.25,
 
-					roughness: 0,
 
-					transmission: 1.0,
 
-					clearcoat: 1.0,
 
-					clearcoatRoughness: 0,
 
-				} );
 
-
 
-				const shadow = new THREE.TextureLoader().load(
 
-					'models/gltf/ferrari_ao.png'
 
-				);
 
-
 
-				loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {
 
-
 
-					gltf.scene.scale.setScalar( 6 );
 
-
 
-					const box = new THREE.Box3().setFromObject( gltf.scene );
 
-					gltf.scene.position.y = - box.min.y;
 
-					gltf.scene.rotation.y = THREE.MathUtils.degToRad( 180 );
 
-
 
-					gltf.scene.traverse( ( obj ) => {
 
-
 
-						if ( obj.isMesh ) {
 
-
 
-							obj.castShadow = obj.recieveShadow = true;
 
-
 
-						}
 
-
 
-					} );
 
-
 
-					gltf.scene.getObjectByName( 'body' ).material = bodyMaterial;
 
-
 
-					gltf.scene.getObjectByName( 'rim_fl' ).material = detailsMaterial;
 
-					gltf.scene.getObjectByName( 'rim_fr' ).material = detailsMaterial;
 
-					gltf.scene.getObjectByName( 'rim_rr' ).material = detailsMaterial;
 
-					gltf.scene.getObjectByName( 'rim_rl' ).material = detailsMaterial;
 
-					gltf.scene.getObjectByName( 'trim' ).material = detailsMaterial;
 
-
 
-					gltf.scene.getObjectByName( 'glass' ).material = glassMaterial;
 
-
 
-					gltf.scene.getObjectByName( 'wheel' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'wheel_1' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'wheel_2' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'wheel_3' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'brake' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'interior_dark' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'brake_1' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'brake_2' ).material = wheelMaterial;
 
-					gltf.scene.getObjectByName( 'brake_3' ).material = wheelMaterial;
 
-
 
-					gltf.scene.getObjectByName( 'yellow_trim' ).material = yellowMaterial;
 
-					gltf.scene.getObjectByName( 'lights' ).material = lightsMaterial;
 
-					gltf.scene.getObjectByName( 'chrome' ).material = chromeMaterial;
 
-
 
-					gltf.scene.getObjectByName( 'wheel_fl' ).rotation.z =
 
-						THREE.MathUtils.degToRad( - 30 );
 
-					gltf.scene.getObjectByName( 'wheel_fr' ).rotation.z =
 
-						THREE.MathUtils.degToRad( - 30 );
 
-
 
-					// shadow
 
-					const mesh = new THREE.Mesh(
 
-						new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ),
 
-						new THREE.MeshBasicMaterial( {
 
-							map: shadow,
 
-							blending: THREE.MultiplyBlending,
 
-							toneMapped: false,
 
-							transparent: true,
 
-						} )
 
-					);
 
-					mesh.rotation.x = - Math.PI / 2;
 
-					mesh.renderOrder = 2;
 
-					gltf.scene.add( mesh );
 
-
 
-					scene.add( gltf.scene );
 
-
 
-				} );
 
-
 
-			}
 
-
 
-			function initMisc() {
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.shadowMap.enabled = true;
 
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
-				
-				// Mouse control
 
-				const controls = new OrbitControls( camera, renderer.domElement );
 
-				controls.target.set( 0, 0, 0 );
 
-				controls.maxPolarAngle = THREE.MathUtils.degToRad( 80 );
 
-				controls.maxDistance = 100;
 
-				controls.minDistance = 30;
 
-				controls.enablePan = false;
 
-				controls.update();
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
-				const gui = new GUI();
 
-				gui.add( params, 'height', 20, 50, 0.1 );
 
-				gui.add( params, 'radius', 200, 600, 0.1 );
 
-				gui.add( renderer, 'toneMappingExposure', 0, 2, 0.1 ).name( 'exposure' );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				render();
 
-
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function renderScene() {
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				renderScene();
 
-
 
-				env.radius = params.radius;
 
-				env.height = params.height;
 
-
 
-			}
 
-		</script>
 
-	</body>
 
-</html>

+ 208 - 0
examples/webgl_materials_envmaps_groundprojected.html
파일 보기 

@@ -0,0 +1,208 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>
 
+			threejs webgl - materials - ground projected environment mapping
 
+		</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">threejs</a> -
 
+			Ground projected environment mapping. By
 
+			<a href="https://twitter.com/CantBeFaraz" target="_blank" rel="noopener"
 
+				>Faraz Shaikh</a
 
+			>.
 
+			<br> 
+			Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
 
+		</div>
 
+
 
+		<!-- Import maps polyfill -->
 
+		<!-- Remove this when import maps will be widely supported -->
 
+		<script
 
+			async
 
+			src="https://unpkg.com/[email protected]/dist/es-module-shims.js"
 
+		></script>
 
+
 
+		<script type="importmap">
 
+			{
 
+				"imports": {
 
+					"three": "../build/three.module.js"
 
+				}
 
+			}
 
+		</script>
 
+
 
+		<script type="module">
 
+			import * as THREE from 'three';
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { GroundProjectedEnv } from './jsm/objects/GroundProjectedEnv.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
+			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
+
 
+			const params = {
 
+				height: 34,
 
+				radius: 440,
 
+				toneMappingExposure: 1
 
+			};
 
+
 
+			let camera, scene, renderer, stats, env;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				camera = new THREE.PerspectiveCamera(
 
+					45,
 
+					window.innerWidth / window.innerHeight,
 
+					1,
 
+					1000
 
+				);
 
+				camera.position.set( - 16, 8, 16 );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				const cubeLoader = new THREE.CubeTextureLoader();
 
+				cubeLoader.setPath( 'textures/cube/lake/' );
 
+
 
+				const textureCube = cubeLoader.load( [
 
+					'px.png',
 
+					'nx.png',
 
+					'py.png',
 
+					'ny.png',
 
+					'pz.png',
 
+					'nz.png',
 
+				] );
 
+				textureCube.encoding = THREE.sRGBEncoding;
 
+
 
+				env = new GroundProjectedEnv( textureCube );
 
+				env.scale.setScalar( 100 );
 
+				scene.add( env );
 
+
 
+				scene.environment = textureCube;
 
+
 
+				const dracoLoader = new DRACOLoader();
 
+				dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
+
 
+				const loader = new GLTFLoader();
 
+				loader.setDRACOLoader( dracoLoader );
 
+
 
+				const shadow = new THREE.TextureLoader().load(
 
+					'models/gltf/ferrari_ao.png'
 
+				);
 
+
 
+				loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {
 
+
 
+					const bodyMaterial = new THREE.MeshPhysicalMaterial( {
 
+						color: 0xff0000, metalness: 1.0, roughness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.03, sheen: 0.5
 
+					} );
 
+
 
+					const detailsMaterial = new THREE.MeshStandardMaterial( {
 
+						color: 0xffffff, metalness: 1.0, roughness: 0.5
 
+					} );
 
+
 
+					const glassMaterial = new THREE.MeshPhysicalMaterial( {
 
+						color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0
 
+					} );
 
+
 
+					const carModel = gltf.scene.children[ 0 ];
 
+					carModel.scale.multiplyScalar( 4 );
 
+					carModel.rotation.y = Math.PI;
 
+
 
+					carModel.getObjectByName( 'body' ).material = bodyMaterial;
 
+
 
+					carModel.getObjectByName( 'rim_fl' ).material = detailsMaterial;
 
+					carModel.getObjectByName( 'rim_fr' ).material = detailsMaterial;
 
+					carModel.getObjectByName( 'rim_rr' ).material = detailsMaterial;
 
+					carModel.getObjectByName( 'rim_rl' ).material = detailsMaterial;
 
+					carModel.getObjectByName( 'trim' ).material = detailsMaterial;
 
+
 
+					carModel.getObjectByName( 'glass' ).material = glassMaterial;
 
+
 
+					// shadow
 
+					const mesh = new THREE.Mesh(
 
+						new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ),
 
+						new THREE.MeshBasicMaterial( {
 
+							map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true
 
+						} )
 
+					);
 
+					mesh.rotation.x = - Math.PI / 2;
 
+					mesh.renderOrder = 2;
 
+					carModel.add( mesh );
 
+
 
+					scene.add( carModel );
 
+
 
+				} );
 
+			
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.shadowMap.enabled = true;
 
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
+			
+				//
 
+			
+				const controls = new OrbitControls( camera, renderer.domElement );
 
+				controls.target.set( 0, 0, 0 );
 
+				controls.maxPolarAngle = THREE.MathUtils.degToRad( 80 );
 
+				controls.maxDistance = 100;
 
+				controls.minDistance = 30;
 
+				controls.enablePan = false;
 
+				controls.update();
 
+
 
+				stats = new Stats();
 
+				document.body.appendChild( stats.dom );
 
+
 
+				const gui = new GUI();
 
+				gui.add( params, 'height', 20, 50, 0.1 );
 
+				gui.add( params, 'radius', 200, 600, 0.1 );
 
+
 
+				//
 
+
 
+				document.body.appendChild( renderer.domElement );
 
+				window.addEventListener( 'resize', onWindowResize );
 
+			
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+				render();
 
+
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				renderer.render( scene, camera );
 
+
 
+				env.radius = params.radius;
 
+				env.height = params.height;
 
+
 
+			}
 
+		</script>
 
+	</body>
 
+</html>