So meshes loaded using gltf loader have normalScale of (1,-1)
the default value of normalScale in meshStandardMaterial is (1,1)
when applying a normal map from polyhaven on
- a mesh from a gltf
- a mesh made with
is there any steps i can take so the normals look correct on both models automatically?
The glTF specification has a different texture coordinate convention than three.js uses by default. When assigning any texture to a material on a mesh loaded from a glTF file you’ll need to:
texture.flipY = false
- if the texture is a normal map and the mesh does not include vertex tangents, then you also need to make sure the Y component of
normalScale is negated as shown above. GLTFLoader will do this automatically when a normal map is included in the file.
To check whether a mesh has tangents, see if
If you wanted to scale the normal map by 4x, normalScale would be (+4,-4) instead.
It doesn’t matter whether you create the material yourself or not — it’s the geometry that matters. Geometry loaded from glTF files requires these steps, geometry created procedurally in three.js will not. Geometry from other file formats … who knows!