Three.js – Applying texture to Collada mesh yields unexpected result

Question

Following the Three.js ColladaLoader example , I've exported a Cinema4D soda can model ( consisting of 4 meshes ) to a .dae file. One of the meshes, the body of the can, I want to add a texture to.

In Cinema4D I've already made a texture based on a UV map of the mesh (spherical). However, when I try to apply the texture to the mesh, it simply shows a solid white fill. I've added the entire code in this Codepen . Relevant code below, edited for brevity:

loader = new THREE.ColladaLoader();
loader.load('can.dae', function (collada) {
    can = collada.scene;

    can.traverse(function (node) {
        var textureLoader

        if (node.name == 'wrapper') {
            textureLoader = new THREE.TextureLoader();

            textureLoader.load('wrapper.png', function (texture) {
                node.material = new THREE.MeshBasicMaterial({
                    map: texture
                });

                node.material.needsUpdate = true;
            });
        }
    });

    scene.add(can); 
});

Illustration of the result. As you can see, the wrapper of the can isn't the red wrapper.png provided, but a solid white fill. I've tried experimenting with mapping and wrapping modes, but to no avail. Any help very much appreciated!

FYI: I've already ruled out CORS issues.

Answer 1

I added a cube in your loader and gave it that material and it worked.. so the implication is that your can mesh does not have proper UV coordinates assigned to it.. Perhaps it is using an automatic cylindrical mapping in your authoring software which is not exporting it's UVs? What software are you authoring in?

            scene.add(new THREE.Mesh(new THREE.BoxGeometry(1,1,1),node.material));

https://codepen.io/manthrax/pen/ePBZbZ?editors=1001