ソースを参照

Beautyfied example and added to list

arobertson0 6 年 前
コミット
acf1b5a759
2 ファイル変更28 行追加13 行削除
  1. 1 0
      examples/files.js
  2. 27 13
      examples/webgl_materials_clearcoat_normalmap.html

+ 1 - 0
examples/files.js

@@ -147,6 +147,7 @@ var files = {
 		"webgl_materials_bumpmap_skin",
 		"webgl_materials_cars",
 		"webgl_materials_channels",
+		"webgl_materials_clearcoat_normalmap",
 		"webgl_materials_compile",
 		"webgl_materials_cubemap",
 		"webgl_materials_cubemap_balls_reflection",

+ 27 - 13
examples/_.html → examples/webgl_materials_clearcoat_normalmap.html

@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-	<title>three.js webgl - materials - normal map [Lee Perry-Smith]</title>
+	<title>three.js webgl - materials - clearcoat normal</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">
@@ -20,7 +20,7 @@
 
 <body>
 	<div id="info">
-		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl clearcoat geometry normal
+		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - materials - clearcoat normal
 		demo.<br />
 	</div>
 
@@ -52,14 +52,14 @@
 		var guiNormalMapNames = [
 			"face",
 			"tentacle"
-		]
+		];
 
 		var guiMatParams = {
 			normalMap: "face",
 			normalScale: 1.0,
 			clearCoatNormalMap: "tentacle",
 			clearCoatNormalScale: 1.0,
-		}
+		};
 
 		var particleLight;
 		var meshes = [];
@@ -256,17 +256,31 @@
 
 			var gui = new GUI();
 
-			gui.add(guiParams, 'metalness', 0, 1, 0.01);
-			gui.add(guiParams, 'roughness', 0, 1, 0.01);
-			gui.add(guiParams, 'reflectivity', 0, 1, 0.01);
-			gui.add(guiParams, 'clearCoat', 0, 1, 0.01);
-			gui.add(guiParams, 'clearCoatRoughness', 0, 1, 0.01);
+			{
+				var materialGui = gui.addFolder( 'Physical Material' );
+				materialGui.add(guiParams, 'metalness', 0, 1, 0.01);
+				materialGui.add(guiParams, 'roughness', 0, 1, 0.01);
+				materialGui.add(guiParams, 'reflectivity', 0, 1, 0.01);
+				materialGui.open();
+			}
+			{
+				var clearCoatGui = gui.addFolder( 'ClearCoat' );
+				clearCoatGui.add(guiParams, 'clearCoat', 0, 1, 0.01);
+				clearCoatGui.add(guiParams, 'clearCoatRoughness', 0, 1, 0.01);
+				clearCoatGui.open();
+			}
+			{
+				var normalGui = gui.addFolder( 'Normal Maps' );
+				normalGui.add(guiMatParams, 'normalMap', guiNormalMapNames);
+				normalGui.add(guiMatParams, 'normalScale', 0, 1, 0.01);
+				normalGui.add(guiMatParams, 'clearCoatNormalMap', guiNormalMapNames);
+				normalGui.add(guiMatParams, 'clearCoatNormalScale', 0, 1, 0.01);
+				normalGui.open();
+			}
+
+
 
 
-			gui.add(guiMatParams, 'normalMap', guiNormalMapNames);
-			gui.add(guiMatParams, 'normalScale', 0, 1, 0.01);
-			gui.add(guiMatParams, 'clearCoatNormalMap', guiNormalMapNames);
-			gui.add(guiMatParams, 'clearCoatNormalScale', 0, 1, 0.01);
 
 			gui.open();
 		}