Why isn't the texture applied to the ship?

Questions
1

Hello,

I have a very simple example that load a model and a texture: Plunker - [Texture is not applied] Load a ship with COLLADA loader in Three.js and JavaScript (plnkr.co) But the texture is not applied:

image

async function loadAssets() {
    const loader = new ColladaLoader();
    const textureLoader = new THREE.TextureLoader();

    const playerPromise = await loader.loadAsync("./assets/player.dae");
    const player = playerPromise.scene.children[0];
    const playerTexture = await textureLoader.loadAsync("./assets/player.png");
    const playerMaterial = new THREE.MeshBasicMaterial({ map: playerTexture });
    player.material = playerMaterial;
    scene.add(player);

    render();
}
loadAssets();
2

If you console log player after its loaded what do you see in the console? My guesses are you’re trying to apply material to the scenes parent node that is not necessarily a mesh…

1 Like
3

Your player object has children and they have a different (Lambertian) material. Try to apply the material to children:

const playerMaterial = new THREE.MeshBasicMaterial(
        { 
            map: playerTexture,
            color: 0xffffff,
        });
    player.children.forEach(ch => ch.material = playerMaterial);
    // player.material = playerMaterial;

This shows the texture on each child but most likely each child need to have proper uv set for it to look right.

2 Likes