three.js image texture rendered as color (loaded with ColladaLoader)

Question

I am a three.js newbie. Started learning 2 days ago.

I drew a box on SketchUp, exported as collada file (.dae), loaded into a scene with three.js.

Now i'm trying to tile the object with texture(s) but i failed.

Trying to tile this texture:

Getting this instead:

And my code is:

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, controls;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 500 );
    camera.position.set(-6,1,-3);
    scene = new THREE.Scene();
    // collada

    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( 'kutu.dae', function(collada) {
        var object = collada.scene;
        //object.scale.set( 2, 2, 2 );
        object.position.set(.18, 0, -.70 );

        //var material = new THREE.MeshLambertMaterial({color: 0xff00ff});
        var texture = new THREE.TextureLoader().load( "desen.jpg" );
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set( 2, 2 );
        texture.minFilter = THREE.LinearFilter;

        var material = new THREE.MeshPhongMaterial( {
            map: texture,
            transparent: false
        });

        console.log(material);

        object.traverse( function (child) {

            if ( child instanceof THREE.Mesh ) {
                //if(Math.random() < 0.5)
                //    child.material = material;
                //else
                    child.material = material;
            }
        });

        scene.add( object );
    });

    //

    //var gridHelper = new THREE.GridHelper( 10, 20 );
    //scene.add( gridHelper );

    //

    var ambientLight = new THREE.AmbientLight( 0xcccccc );
    scene.add( ambientLight );
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 0, 1, -1 ).normalize();
    scene.add( directionalLight );

    //

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    //

    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.enableZoom = false;
    controls.enablePan = false;

    //

    stats = new Stats();
    document.body.appendChild( stats.dom );

    //
    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
    requestAnimationFrame( animate );
    render();
    stats.update();
}

function render() {
    renderer.render( scene, camera );
}

Please help...

Answer 1

Alright, after we discuss in the comments above, i have decided to add my own answer / solution.

I strongly recommend you to read comments of the question first.

The problem is, there is no UV info given / attached in the exported model file.

You have to define it yourself using a 3d modelling program (3ds max, Maya, Blender etc.) or use the SketchUV plugin.