Wrong color with specific materials on loaded objects

Questions
,
1

I created a basic model in Blender, UV mapped it to a color pallet, and exported as .glb. When I load this model in directly, the colors are displayed exactly as on the pallet. The colors are gray, red, and blue.

default
default1087×539 21.1 KB

However, I want more of a cartoony look without reflections so I decided to try the BasicMeshMaterial to load the pallet.

      glb.scene.traverse(function(child){
        if ((<THREE.Mesh>child).isMesh){
          var texture_loader = new THREE.TextureLoader();
          var basic_mat = new THREE.MeshBasicMaterial({map: texture_loader.load('./assets/3d/pallet.png'),});
          (<THREE.Mesh>child).material = basic_mat;
        }
      })

basicmaterial
basicmaterial1090×539 2.92 KB

Also the MeshLambertMaterial (with reflections)

lambert
lambert1089×537 35 KB

You can see in both examples that the gray changes to tan and the red turns to purple. Any idea what’s going on? Am I missing a specific map for these materials? This happens when I use any specific material instead of the default when the object is loaded.

Here’s an example of of the gray exterior mapped in Blender:
tan

Heres the model if you want to take a look:
ship.glb (78.3 KB)

Any help is greatly appreciated!

2

When loading a texture and applying it to a glTF model you’ll need to set texture.flipY = false. This is related to the texture coordinate convention. You’ll probably also want to assign texture.encoding = THREE.sRGBEncoding. GLTFLoader docs go into this and a few other tips.

2 Likes