Three.js partially stretched texture

Question

I am using the Collada loader to load my 3D object in Three.js r65. And at the loading callback I apply immediatly a texture to all parts of the model with the following code.

var loader = new THREE.ColladaLoader();

loader.options.convertUpAxis = true;
loader.load('obj/cdg/Grenada-test1.dae', function(collada) {

    var texture = new THREE.ImageUtils.loadTexture("../models/textures/Gr1 08869 Bready Grey.jpg");


    var material = new THREE.MeshPhongMaterial({map: texture, tranparent: true});
    for (var i = 0; i < collada.scene.children.length; i++) {
        collada.scene.children[i].material = material;
    }

});

In Three.js it looks like this (texture is stretched at certain locations).

The object is showing fine in Unity 3D with an texture applied, see the following image.

What I have tried:

• Updating the UV mapping in Three.js and in Blender
• Load the model in a different program (Unity 3D) to see if the problem occurs there
• Searched numerous SO questions, but no avail

Does anybody know what is going on here and how I can solve this weird texture issue?

Thanks in advance!

Edit:

This is what it looks like with texture.repeat.set( 2, 2 )

This is what is looks like with texture.repeat.set( 10, 10 )

The texture repeat makes the texture dissapear and a solid color is replacing the texture...

Answer 1

Set the wrapS and wrapT properties to THREE.RepeatWrapping:

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

And make sure your textures are "power of 2". That is 16x16, 32x32, 64x64, 128x64, etc

Answer 2

Have you tried to turn on texture repeat? Something like this:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 2, 2 );

Answer 3

ok..but how can i apply multiple textures on same object? any solution?

You would want to use a materialArray and add a different texture to for each Face of the Vertex you want to texture.