Merge pull request #13564 from Mugen87/dev8

Docs: Added preview for MeshPhysicalMaterial

docs/api/materials/MeshPhysicalMaterial.html

@@ -18,7 +18,7 @@
 			Note that for best results you should always specify an [page:.envMap environment map] when using this material.
 		</div>
 
-		<!-- <iframe id="scene" src="scenes/material-browser.html#MeshStandardMaterial"></iframe>
+		<iframe id="scene" src="scenes/material-browser.html#MeshPhysicalMaterial"></iframe>
 
 		<script>
 
@@ -34,7 +34,7 @@
 
 		}
 
-		</script> -->
+		</script>
 
 		<h2>Examples</h2>
 		[example:webgl_materials_variations_physical materials / variations / physical]<br />

docs/scenes/js/material.js

@@ -386,8 +386,6 @@ function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
 		alphaMap: textureMapKeys
 	};
 
-	var envObj = {};
-
 	var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
 
 	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
@@ -476,6 +474,42 @@ function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
 
 }
 
+function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
+
+	var data = {
+		color: material.color.getHex(),
+		emissive: material.emissive.getHex(),
+		envMaps: envMapKeys,
+		map: textureMapKeys,
+		lightMap: textureMapKeys,
+		specularMap: textureMapKeys,
+		alphaMap: textureMapKeys
+	};
+
+	var folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+	folder.add( material, 'roughness', 0, 1 );
+	folder.add( material, 'metalness', 0, 1 );
+	folder.add( material, 'reflectivity', 0, 1 );
+	folder.add( material, 'clearCoat', 0, 1 ).step( 0.01 );
+	folder.add( material, 'clearCoatRoughness', 0, 1 ).step( 0.01 );
+	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'wireframe' );
+	folder.add( material, 'wireframeLinewidth', 0, 10 );
+	folder.add( material, 'vertexColors', constants.colors );
+	folder.add( material, 'fog' );
+	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
+	folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
+	folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
+
+	// TODO roughnessMap and metalnessMap
+
+}
+
 function chooseFromHash( gui, mesh, geometry ) {
 
 	var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
@@ -523,6 +557,16 @@ function chooseFromHash( gui, mesh, geometry ) {
 
 			break;
 
+		case 'MeshPhysicalMaterial' :
+
+			material = new THREE.MeshPhysicalMaterial( { color: 0x2194CE } );
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshPhysicalMaterial( gui, mesh, material, geometry );
+
+			return material;
+
+			break;
+
 		case 'MeshDepthMaterial' :
 
 			material = new THREE.MeshDepthMaterial();