0
432
ViewsHow can I modify a material of a gltf model in THREE.js
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?
2 answers
Answer question0
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.
0
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 );
} );