Help with material

Questions
,
1

Hello,

I have a model that i’ve exported from blender as glb and having some issues with material and textures. It renders the object correctly but the material seems weird. Anyone seen this issue before?

<mesh geometry={nodes.Hat1_Band.geometry}>
  <meshStandardMaterial
    attach="material"
    roughness={1}
    metalness={0.1}
    color={snap.items.band}
    normalMap={velvetNormal}
    aoMap={velvetAmbientocclusion}
  />
</mesh>

Screenshot 2022-06-03 at 16.09.39
Screenshot 2022-06-03 at 16.09.391142×396 131 KB

2

Try removing the aoMap, does it look more normal?

aoMap will always use the 2nd UV set in three.js. If it’s not set up that way in Blender you may need to create a 2nd UV set, or reorder UV sets. Also textures need texture.flipY = false if loaded separately from the glTF model. If you’re loading everything (including the material and textures) with GLTFLoader it’ll do this all automatically, but with a custom material the loader can’t handle it for you.

3

I tried removing it but no difference, also i already have set texture.flipY = false.

Here’s the code

const Model = () => {
  const { nodes } = useGLTF('models/hatv3/vs.gltf');

  const [velvetNormal, velvetAmbientocclusion] = useLoader(TextureLoader, [
    'models/hat/textures/4K-velvet_2_normal.png',
    'models/hat/textures/4K-velvet_2_ambientocclusion.png',
  ]);

  useEffect(() => {
    velvetNormal.flipY = false;
    velvetAmbientocclusion.flipY = false;
  }, [velvetNormal]);

  return (
    <group ref={group} {...props} dispose={null} position={[0, 3, 0]}>
      <mesh geometry={nodes.Hat1_Band.geometry}>
        <meshStandardMaterial
          attach="material"
          roughness={0.5}
          metalness={0.1}
          color={snap.items.band}
          normalMap={velvetNormal}
          aoMap={velvetAmbientocclusion}
        />
      </mesh>
    </group>
  );
};
4

i believe normalmaps must be srgb if output encoding is srgb.

  return (
    <mesh geometry={nodes.Hat1_Band.geometry} position={[0, 3, 0]} dispose={null}>
      <meshStandardMaterial      
        roughness={0.5}
        metalness={0.1}
        color={snap.items.band}
        normalMap={velvetNormal}
        normalMap-encoding={THREE.sRGBEncoding}
        aoMap={velvetAmbientocclusion}
      />
    </mesh>
  )
}
1 Like
5

normalMap.wrapS=normalMap.wrapT=THREE.RepeatWrapping;

1 Like
6

Thanks guys! @drcmda @Chaser_Code ! That did it

1 Like