MeshPhysicalMaterial JSON and editor support (#10051)

editor/js/Sidebar.Material.js

@@ -57,6 +57,7 @@ Sidebar.Material = function ( editor ) {
 		'MeshLambertMaterial': 'MeshLambertMaterial',
 		'MeshPhongMaterial': 'MeshPhongMaterial',
 		'MeshStandardMaterial': 'MeshStandardMaterial',
+		'MeshPhysicalMaterial': 'MeshPhysicalMaterial',
 		'ShaderMaterial': 'ShaderMaterial',
 		'SpriteMaterial': 'SpriteMaterial'
 
@@ -192,6 +193,26 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialShininessRow );
 
+	// clearCoat
+
+	var materialClearCoatRow = new UI.Row();
+	var materialClearCoat = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
+
+	materialClearCoatRow.add( new UI.Text( 'ClearCoat' ).setWidth( '90px' ) );
+	materialClearCoatRow.add( materialClearCoat );
+
+	container.add( materialClearCoatRow );
+
+	// clearCoatRoughness
+
+	var materialClearCoatRoughnessRow = new UI.Row();
+	var materialClearCoatRoughness = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
+
+	materialClearCoatRoughnessRow.add( new UI.Text( 'ClearCoat Roughness' ).setWidth( '90px' ) );
+	materialClearCoatRoughnessRow.add( materialClearCoatRoughness );
+
+	container.add( materialClearCoatRoughnessRow );
+
 	// vertex colors
 
 	var materialVertexColorsRow = new UI.Row();
@@ -536,6 +557,18 @@ Sidebar.Material = function ( editor ) {
 
 			}
 
+			if ( material.clearCoat !== undefined && Math.abs( material.clearCoat - materialClearCoat.getValue() ) >= 0.01 ) {
+
+				editor.execute( new SetMaterialValueCommand( currentObject, 'clearCoat', materialClearCoat.getValue() ) );
+
+			}
+
+			if ( material.clearCoatRoughness !== undefined && Math.abs( material.clearCoatRoughness - materialClearCoatRoughness.getValue() ) >= 0.01 ) {
+
+				editor.execute( new SetMaterialValueCommand( currentObject, 'clearCoatRoughness', materialClearCoatRoughness.getValue() ) );
+
+			}
+
 			if ( material.vertexColors !== undefined ) {
 
 				var vertexColors = parseInt( materialVertexColors.getValue() );
@@ -917,6 +950,8 @@ Sidebar.Material = function ( editor ) {
 			'emissive': materialEmissiveRow,
 			'specular': materialSpecularRow,
 			'shininess': materialShininessRow,
+			'clearCoat': materialClearCoatRow,
+			'clearCoatRoughness': materialClearCoatRoughnessRow,
 			'vertexShader': materialProgramRow,
 			'vertexColors': materialVertexColorsRow,
 			'skinning': materialSkinningRow,
@@ -1008,6 +1043,18 @@ Sidebar.Material = function ( editor ) {
 
 		}
 
+		if ( material.clearCoat !== undefined ) {
+
+			materialClearCoat.setValue( material.clearCoat );
+
+		}
+
+		if ( material.clearCoatRoughness !== undefined ) {
+
+			materialClearCoatRoughness.setValue( material.clearCoatRoughness );
+
+		}
+
 		if ( material.vertexColors !== undefined ) {
 
 			materialVertexColors.setValue( material.vertexColors );

src/loaders/MaterialLoader.js

@@ -61,6 +61,8 @@ Object.assign( MaterialLoader.prototype, {
 		if ( json.emissive !== undefined ) material.emissive.setHex( json.emissive );
 		if ( json.specular !== undefined ) material.specular.setHex( json.specular );
 		if ( json.shininess !== undefined ) material.shininess = json.shininess;
+		if ( json.clearCoat !== undefined ) material.clearCoat = json.clearCoat;
+		if ( json.clearCoatRoughness !== undefined ) material.clearCoatRoughness = json.clearCoatRoughness;
 		if ( json.uniforms !== undefined ) material.uniforms = json.uniforms;
 		if ( json.vertexShader !== undefined ) material.vertexShader = json.vertexShader;
 		if ( json.fragmentShader !== undefined ) material.fragmentShader = json.fragmentShader;

src/materials/Material.js

@@ -162,6 +162,8 @@ Material.prototype = {
 		if ( this.emissive && this.emissive.isColor ) data.emissive = this.emissive.getHex();
 		if ( this.specular && this.specular.isColor ) data.specular = this.specular.getHex();
 		if ( this.shininess !== undefined ) data.shininess = this.shininess;
+		if ( this.clearCoat !== undefined ) data.clearCoat = this.clearCoat;
+		if ( this.clearCoatRoughness !== undefined ) data.clearCoatRoughness = this.clearCoatRoughness;
 
 		if ( this.map && this.map.isTexture ) data.map = this.map.toJSON( meta ).uuid;
 		if ( this.alphaMap && this.alphaMap.isTexture ) data.alphaMap = this.alphaMap.toJSON( meta ).uuid;