Hi
I have an fbx model with multiple texture files. Here is the screenshot of the model in Windows 3D viewer.
In my JS code, I am loading fbx model like this:-
const loader = new FBXLoader()
object = loader.parse(response.target.result,'')
Which is ok but to load multiple texture files, here is my code sample:-
loadTextures(object, textureFiles) {
// object:- Parsed 3D model object
// textureFiles:- All texture files array select with fbx model
const self = this;
return new Promise((resolve, reject) => {
// Remove textures:- First embedded textures if any.
object.traverse(child => {
if (child.material) {
if (child.material instanceof Array) {
child.material.map(mat => {
mat.map = null
mat.needsUpdate = true;
})
child.material = []
} else {
child.material.map = null
child.material.needsUpdate = true;
}
}
})
///////////////// Loading Textures ///////////////
const textureLoader = new THREE.TextureLoader();
self.textureCanvas = [];
let filesLength = textureFiles.length
for (const tFile of textureFiles) {
const readerT = new FileReader();
readerT.readAsDataURL(tFile);
readerT.onload = (r) => {
const dataUrl = r.target.result
const texture = textureLoader.load(dataUrl )
const material = new THREE.MeshBasicMaterial({
map: texture
});
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
// apply texture
if (child.material instanceof Array) {
child.material.push(material);
material.needsUpdate = true
} else {
child.material = material
child.material.needsUpdate = true;
}
}
});
filesLength--
if (filesLength === 0) {
resolve({ object, isglb: false });
}
}
}
})
}
The resultant model after adding to the scene looks like this:-
Would you please help me?