如何在 THREE.js 中修改 gltf 模型的材质

Question

So I have a model I made in Blender, with all the lighting and textures baked, but when I import it into THREE.js (saved in .glb format), it defaults to the standard material. This might be fine in some situations, but, as I said earlier, I have all the lighting and textures baked. How can I change the material from standard to basic without loosing my baking info and textures/having to import them as separate images?

Answer 1

What you're looking for is called KHR_materials_unlit in glTF, or "Shadeless" in Blender. You can export this from Blender to glTF using the following node graph :

With this arrangement, the exported glTF file will have KHR_materials_unlit applied to the material, and the baked lighting in the texture will be preserved in ThreeJS.

Answer 2

In this way you can load your model and put a custom material on it.

This also should work for your glb model. But Three js highly recommend to use gltf.

const modelPath = "your model path";
const texturePath = "your texture path"

const loader = new GLTFLoader();
const texture = new TextureLoader().load(texturePath);
loader.load( modelPath, function ( gltf ) {
    const model = gltf.scene;
    model.traverse((obj) => {
        if(obj instanceof Mesh){
            obj.material = new MeshBasicMaterial({map: texture})
            }
        }
    )

}, undefined, function ( error ) {
    console.error( error );
} );