THREE.js glTF loader (binary) does not display vertex colors?

Question

I have a model with precomputed vertex colors. If I generate glTF file and load it using THREE.GLTFLoader, I can call scene.overrideMaterial = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors}) to convert the default material from MeshStandardMaterial to MeshBasicMaterial. The precomputed colors are then displayed correctly.

If however I generate a binary glTF (*.glb) file and override the material properties, I have to call scene.add(new THREE.AmbientLight(0xffffff) to add ambient lighting to the scene; otherwise, the display is black.

Is this a deficiency with glTFLoader, or am I (more likely) missing something?

Answer 1

Your first example (replacing the original materials) appears the way you expect because THREE.MeshBasicMaterial is an unlit/shadeless material type. From the three.js documentation, it "is not affected by lights", and doesn't require lights to appear onscreen.

When you don't replace the material, the default material created by THREE.GLTFLoader is usually THREE.MeshStandardMaterial, which is a physically-based rendering (PBR) material. Because it is physically-based, it requires lighting to appear onscreen. For best results, especially with metallic materials, you may need an environment map for realistic lighting.

It's also possible to create a glTF model that contains unlit materials (or THREE.MeshBasicMaterial) by default, but based on the results you describe it doesn't sound like your glTF model was authored that way.