Hi everyone!
I’m having an issue with something that several other people also have asked questions about. I tried out multiple options and tried to learn more about this part of ThreeJS, but I find it pretty hard to wrap my head around.
What I would like to do is load one mesh from a GLTF file and assign multiple textures to, as if they’re layers in Photoshop. As I understand it, multiple textures can only be done by using multiple materials with each their own texture. I also learnt that the only type of geometry that can use multiple materials properly is the BufferGeometry.
I tried out several things with this BufferGeometry but I keep running into problems.
Below is an example of something that I tried: (I am using typescript, by the way)
const loader = new GLTFLoader();
const bufferGeometry = new BufferGeometry();
loader.load(gltfFilePath, (gltf: GLTF) => {
gltf.scene.children.forEach(child => {
if (child.type === 'Mesh') {
/* Using 'as Mesh' and 'as Geometry' here, because otherwise the typings aren't correct and I can't figure out why that is */
bufferGeometry.fromGeometry((child as Mesh).geometry as Geometry);
const materials = [
new MeshBasicMaterial({
visible: true,
opacity: 1,
map: texture1
}),
new MeshBasicMaterial({
visible: true,
opacity: 0.5,
map: texture2
})
];
(child as Mesh).geometry = bufferGeometry;
(child as Mesh).material = materials;
group.add(child);
}
});
});
It seems that everytime I add an array of materials, the mesh is not displayed anymore, but I do not get errors in my console. When I just add one material without an array, everything works fine.
But as I understand, I do need a BufferGeometry and the objects from a GLTF file are BufferGeometry by default. So I’m not really sure what I should be doing differently. Am I missing something? Or do I just need to write the code in a different way?
I find it hard to understand how this works, so if there is some source of info about how best to do something like this I would highly appreciate it.