How to texture a 3d model in Three.Js?

Questions
,
1

Faced with the problem of texturing models. If i texture ordinary objects, there are no problems, but if the models are loaded from outside, it does not work. Models are loaded, but when I texture, problems start :c What could be the problem? I will be grateful for any answers. Thank you in advance

//if i texture  the obj model doesn't work
let loader = new THREE.TextureLoader();
let texture = loader.load('texture.png');
const material = new THREE.MeshPhongMaterial({
     map: texture
});
this.objLoader.load('model.obj', (model) => {
    let modelTextured = new THREE.Mesh(model,material)
    scene.add(modelTextured);
});

//if i texture primitive objects it works
    let loader = new THREE.TextureLoader();
    let texture = loader.load('texture.png');
    const material = new THREE.MeshPhongMaterial({
        map: texture
    });
    let geomentry = new THREE.BoxGeometry(10,10,10);
    let cube = new THREE.Mesh(geomentry,material);
    scene.add(cube);
2

models need to be uv-unwrapped, as in, they need to have proper uv coordinates that tell the texture which areas to cover. without this there’s no sense in applying a texture to it, what would that even mean. imo you should be texturing your models in blender and then export as a self-contained, compressed gltf.

1 Like
3

OBJLoader already returns THREE.Object3D, so passing model in the first parameter of THREE.Mesh constructor will lead to an error.
I would use something like:

this.objLoader.load('model.obj', (model) => {
    model.traverse( child => {
        if (child.isMesh){
            child.material = material;
        }
    })
    scene.add(model);
});
4

Thank you I didn’t know about this :slight_smile:

5

Thank you :slight_smile: