meshPhysicalMaterial render problem (with metalnessMap and roughnessMap)

Questions
,
1

Screenshot (4)
Screenshot (4)1378×803 31.5 KB

Screenshot (5)
Screenshot (5)1369×883 72.3 KB

Hi everyone, i’m trying to obtain this graphic rendering but i’m failing, anyone has tips for me. Atm i’m loding my model like this, seen in gltf-viewer.
I took this model from sketchfab Sink and mirror - Download Free 3D model by davihoff [c976dd7] - Sketchfab

child.traverse((mesh) => {
					child.receiveShadow = true;
					child.castShadow = true;
					if(mesh instanceof THREE.Mesh){		
						if(mesh.material){
							mesh.material = new THREE.MeshPhysicalMaterial(mesh.material);
							mesh.material.castShadow;
							mesh.material.receiveShadow;
							if(mesh.material.roughnessMap){
								mesh.material.roughness = 1.0;
							} 
							if(mesh.material.metalnessMap){
								mesh.material.metalness = 1.0;
							}
							if(mesh.material.normalMap){
								mesh.material.normalMap.type = THREE.TangentSpaceNormalMap;
								mesh.material.normalMap.normalScale = new Vector2(1, 1);
							} 

							mesh.material.needsUpdate = true;
							
						}

i’ve setted my renderer with sRGBEncoding and i put an env map.
Thank you

2

metalness on its own is just black, you need an environment map for it to pick up reflections. you wouldn’t have to do anything other than that, it is not necessary to mutate the gltf data.

for instance in this example: Faucets, select highlight - CodeSandbox remove line 59, then you see the effect that envmaps have.

3

I noticed that my environment map is not illuminating the scene.
I’m coding in ts and i have these versions

  "dependencies": {
    "parcel": "^2.7.0",
    "postprocessing": "^6.28.0",
    "screen-space-reflections": "^2.5.0",
    "three": "^0.141.0",
    "tweakpane": "^3.1.0"
  }

I think that i’m loading correctly my hdr

	new RGBELoader()
		.setPath( '../../assets/' )
		.load( 'studio_small_07_4k.hdr', ( texture ) => {
			texture.mapping = THREE.EquirectangularReflectionMapping;
			scene.environment = texture;
		} );
4

it’s correct, best plug it into background as well to see if it’s actually there. otherwise it might just be a path issue. typo, wrong folder etc.

5

What’s the reason for this line? The default material in most glTF files will be THREE.MeshStandardMaterial. For the properties you are using above, I don’t think there is any reason to upgrade it to the more expensive THREE.MeshPhysicalMaterial.

Also, materials do not accept other materials as constructor arguments. The way to do what you’re trying here, if you do need MeshPhysicalMaterial, would be:

const material = new THREE.MeshPhysicalMaterial();
THREE.MeshStandardMaterial.prototype.copy.call(material, mesh.material);
mesh.material = material;

There are a lot of properties that could be used on your original materials. I’d be careful of settings like normalScale unless you’re pretty sure about them!

1 Like
6

Thanks both, i’ve fixed everything