To change texture maps for AO/Roughness map/Metalness map I am using shaders but onBeforeCompile is not working I also use console.log but nothing is displaying in the console.
gltf.scene.traverse(function (child) {
if (child! instanceof THREE.Mesh) return;
if (child instanceof THREE.Mesh) {
child.material.onBeforecompile = function (shader) {
if (child.material) {
console.log("On compile");
child.material.onBeforeCompile = function () {
shader.fragmentShader = 'uniform int r;\n' + shader.fragmentShader.replace(/}$/, `if(r == 1){
gl_FragColor.rgb = texture2D(roughnessMap, vUv).ggg;
}else if(r ==2){
gl_FragColor.rgb = texture2D(metalnessMap, vUv).bbb;
}else if(r == 3){
gl_FragColor.rgb = texture2D(aoMap, vUv).rrr;
}}`,
shader.uniforms.r = {});
Object.defineProperty(shader.uniforms.r, "value", {
get() {
return child.material.r;
}
});
child.material.r = 0;
}
}
}
}
})
textureVariants();
selB.onChange(function (value) {
gltf.scene.traverse(function (child) {
if (child instanceof THREE.Mesh) {
//When loading the gltf (or before the first render frame) inside a traverse function
const mat = new THREE.MeshPhysicalMaterial({})
if (value === 'normalMap') {
if (child.material.normalMap) {
child.material.map = child.material.normalMap;
//child.material.needsUpdate = true;
console.log('Normal map exist');
}
}
if (value === 'alphaMap') {
if (child.material.alphaMap) {
child.material.map = child.material.alphaMap;
//child.material.needsUpdate = true;
console.log('Alpha map exist');
}
}
if (value === 'aoMap') {
if (child.material.aoMap) {
child.geometry.setAttribute('uv2', new THREE.BufferAttribute(child.geometry.attributes.uv.array, 2));
child.material.map = child.material.aoMap;
//child.material.needsUpdate = true;
console.log('AO map exist');
}
}
if (value === 'emissiveMap') {
if (child.material.emissiveMap) {
child.material.map = child.material.emissiveMap;
//child.material.needsUpdate = true;
console.log('Emissive map exist');
}
}
if (value === 'roughnessMap') {
if (child.material.roughnessMap) {
//putting this (or similar) at the beginningt
console.log(child.material.roughnessMap);
child.material.map = child.material.roughnessMap;
//child.material.map.needsUpdate = true;
//child.material.needsUpdate = true;
child.material.r = 1;
console.log(child.material.r);
console.log('Roughness map exist');
}
}
if (value === 'metalnessMap') {
if (child.material.metalnessMap) {
child.material.map = child.material.metalnessMap;
//child.material.needsUpdate = true;
child.material.r = 2;
console.log('Metalness map exist');
}
}
if (value === 'None') {
// const mat = [child.material.normalMap,child.material.aoMap,child.material.emissiveMap];
// for(let i = 0;i<mat.length;i++){
// //console.log(mat);
// }
// console.log(child.material.map)
// //if(child.material.normalMap !== 'undefined' || child.material.aoMap !== 'undefined' || child.material.alphaMap !== 'undefined' || child.material.emissiveMap)
//const mat = new THREE.MeshPhongMaterial({normalMap:child.material.normalMap,aoMap:child.material.aoMap,emissiveMap:child.material.emissiveMap})
//const mat1 = new THREE.MeshStandardMaterial({metalnessMap:child.material.metalnessMap,roughnessMap:child.material.roughnessMap,normalMap:child.material.normalMap,aoMap:child.material.aoMap,emissiveMap:child.material.emissiveMap})
//console.log(mat)
//console.log(child.material)
//child.material.map = null;
//child.material.needsUpdate = true;
}
else {
console.log('normal map not');
}
//child.material.map = child.material.roughnessMap;
//child.material.needsUpdate = true;
}
}
)
})