Texture gets overlapped when load another texture

Questions
,
1

Hi! I am trying to build a house in Three.js and load different textures on different parts of the house. I first load a complete GLTF model of the house, then traverse the children and add them into groups as the components of the house. However, when I try to load a texture onto a group, the previous group, which has already been given a texture, displays an overlap of the previous and the current texture. Can anyone help me with this? Here is my current code:

const groups = {
    f: [],
    r: [],
    w: [],
    v: [],
    h: [],
    t: [],
}
const modelLoader = new GLTFLoader();
modelLoader.load(houseURL, (gltf) => {
    const model = gltf.scene;

    //Loading Texture based on groups
    model.children.forEach((child) => {
        const cGroup = child.name[0];
        groups[cGroup].push(child);
    })

    //Add 3d objects into groups
    const walls = createGroup(groups.w, 'walls', wallTextureURL);
    const roofs = createGroup(groups.r, 'roofs', roofTextureURL);
    const verts = createGroup(groups.v, 'verts', beamsTextureURL);
    const hors = createGroup(groups.h, 'hors', beamsTextureURL);
    const tris = createGroup(groups.t, 'tris', beamsTextureURL);
    const floor = createGroup(groups.f, 'floor', floorTextureURL);
}, undefined, (error) => console.log('Something is wrong!', error));

//Apply texture
const applyTexture = (model, textureURL) => {
    const newTexture = new TextureLoader();
    newTexture.load(textureURL, (textureS) => {
        model.traverse((child) => {
            // debugger;
            if (child.isMesh || child.isPoint) {
                textureS.wrapS = THREE.RepeatWrapping;
                textureS.wrapT = THREE.RepeatWrapping;
                textureS.repeat.set(API.xRepeat, API.yRepeat);
                textureS.flipY = false;
                child.material.map = textureS;
                child.material.needsUpdate = true;
            }
        })
    renderer.render( scene, camera );
    }, undefined, (error) => console.log('something went wrong', error))
}

Thanks for looking!

2

imo this approach can only result in trouble. you are traversing and destroying source data. traversal is very fragile on its own, but bleeding first-characters into an object seems like asking for it. i don’t know what else to tell you but i wouldn’t suggest you run with this code.

this is only a suggestion, but a clean solution is to pair threejs with a declarative framework. for instance, this is bruno simons hamburger model epic-banzai-m3g4hj - CodeSandbox but the whole graph is there: the buns, meat, cheese. you could alter each part, bind it to state or textures, add event handlers on it etc. you don’t traverse any longer, you don’t destroy source data.

if this interests you go here and watch the video GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components otherwise bruno simon also teaches it in threejs-journey.

4

Hi! Thank you for the very helpful link! In the sandbox, I don’t see any imported texture onto the scene. Are the buns, meat, and cheese textures already included in the .glb file? I’m new to drawing 3D models, and the model that I loaded with GLTF is a wireframe model with no texture that I made in Blender. What do you recommend if I want to use an imported texture that I will manipulate beforehand before applying it onto the mesh?

5

the point of the sandbox was that now that you have the model graph, adding a texture wouldn’t be much more than writing map={foo}. here’s a real world example of a declarative scene where a texture is applied ThreeJS Journey Portal - CodeSandbox

you can of course traverse and query, but keep in mind it’s hard to control.

btw, placing a texture onto something won’t really work, unless the texture has specifically been prepared for the model. the model has to be UV unwrapped in blender first. never mind if you already did this, but if you didn’t i would start with simpler things, threejs-journey is a fantastic start into 3d programming.