Improved clearcoat example.

mrdoob · Aug 28, 2019 · c22370c · c22370c
1 parent 698d53c
commit c22370c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/examples/textures/flakes.png b/examples/textures/flakes.png
diff --git a/examples/textures/golfball.jpg b/examples/textures/golfball.jpg
diff --git a/examples/webgl_materials_physical_clearcoat.html b/examples/webgl_materials_physical_clearcoat.html
@@ -2,15 +2,15 @@
 <html lang="en">
 
 <head>
-	<title>three.js webgl - materials - clearcoat normal</title>
+	<title>three.js webgl - materials - clearcoat</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="info">
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - materials - clearcoat normal map
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - materials - clearcoat
 	</div>
 
 	<script type="module">
@@ -77,25 +77,40 @@
 
 						var normalMap2 = textureLoader.load( "textures/water/Water_1_M_Normal.jpg" );
 
+						var normalMap3 = textureLoader.load( "textures/flakes.png" );
+						normalMap3.wrapS = THREE.RepeatWrapping;
+						normalMap3.wrapT = THREE.RepeatWrapping;
+						normalMap3.repeat.x = 10;
+						normalMap3.repeat.y = 10;
+						normalMap3.anisotropy = 16;
+
+						var normalMap4 = textureLoader.load( "textures/golfball.jpg" );
+
 						var clearcoatNormaMap = textureLoader.load( "textures/pbr/Scratched_gold/Scratched_gold_01_1K_Normal.png" );
 
-						//
+						// car paint
 
 						var material = new THREE.MeshPhysicalMaterial( {
 							clearcoat: 1.0,
+							clearcoatRoughness: 0.1,
+							metalness: 0.9,
+							roughness: 0.5,
+							color: 0x0000ff,
 							envMap: hdrCubeRenderTarget.texture,
-							map: diffuse
+							normalMap: normalMap3,
+							normalScale: new THREE.Vector2( 0.1, 0.1 )
 						} );
 
 						var mesh = new THREE.Mesh( geometry, material );
 						mesh.position.x = - 100;
 						mesh.position.y = 100;
 						group.add( mesh );
 
-						// normalmap
+						// fibers
 
 						var material = new THREE.MeshPhysicalMaterial( {
 							clearcoat: 1.0,
+							clearcoatRoughness: 0.1,
 							envMap: hdrCubeRenderTarget.texture,
 							map: diffuse,
 							normalMap: normalMap
@@ -105,12 +120,13 @@
 						mesh.position.y = 100;
 						group.add( mesh );
 
-						// clearcoat
+						// golf
 
 						var material = new THREE.MeshPhysicalMaterial( {
-							clearcoat: 1.0,
 							metalness: 0.0,
-							color: 0xff0000,
+							roughness: 0.1,
+							clearcoat: 1.0,
+							normalMap: normalMap4,
 							envMap: hdrCubeRenderTarget.texture,
 							clearcoatNormalMap: clearcoatNormaMap,
 							clearcoatNormalScale: new THREE.Vector2( 2.0, 2.0 )
@@ -158,7 +174,7 @@
 			);
 			scene.add( particleLight );
 
-			particleLight.add( new THREE.PointLight( 0xffffff, 1.25 ) );
+			particleLight.add( new THREE.PointLight( 0xffffff, 1 ) );
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );