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:
- set
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
normalScaleis 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 mesh.geometry.attributes.tangent exists.
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! 