Normal Map Issues in Three.js with Blender-exported glTF

Based on the screenshots and your description, it appears you're experiencing issues with normal maps when exporting from Blender to glTF and viewing in Three.js-based viewers like modelviewer.dev. This is a common issue that can be related to different normal map conventions between Blender and Three.js.

Possible Solutions

1. Check Normal Map Coordinate System

Three.js documentation mentions that normal maps can use different coordinate systems:

If the material's normal map uses a left-hand convention, you should set the normalScale's y component to a negative value to compensate for the different handedness.

Try adjusting your material in Three.js with:

JAVASCRIPTCopied
material.normalScale.y = -1;

2. Verify Normal Map Type

Three.js supports two types of normal maps:

JAVASCRIPTCopied
// Options are:
THREE.TangentSpaceNormalMap // Default
THREE.ObjectSpaceNormalMap

Make sure you're using the correct type. Most Blender normal maps are tangent space normal maps (the default in Three.js), but if you're using object space normal maps, you'll need to specify:

JAVASCRIPTCopied
material.normalMapType = THREE.ObjectSpaceNormalMap;

3. Check Normal Map Channel Configuration

Ensure your normal map's RGB channels are correctly configured. In Blender, you might need to adjust the normal map node settings to ensure it's exporting in a format compatible with Three.js.

4. Roughness Map Settings

For the roughness map, Three.js uses the green channel of the texture. Make sure your roughness map is properly configured:

JAVASCRIPTCopied
material.roughnessMap = roughnessTexture;

Additional Recommendations

1. Try using a simpler test case first to isolate the issue
2. Examine the exported glTF file to ensure the normal and roughness maps are correctly referenced
3. Consider using a glTF validator to check for any issues in your exported file
4. If possible, try viewing your model in different glTF viewers to see if the issue is specific to Three.js

If you need more specific help, you might want to share the actual textures you're using along with a minimal code example showing how you're setting up the material in Three.js.