Currently, I am using the Collada loader in Three.js r65 to load my 3D object. Upon loading, I apply a texture to all parts of the model using the following code snippet.
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, the texture appears stretched at certain locations.
The object displays correctly in Unity 3D when a texture is applied, as shown in the image below.
My attempted solutions so far include:
- Updating the UV mapping in Three.js and Blender
- Loading the model in Unity 3D to check if the issue persists
- Browsing through several SO questions but unable to find a solution
If anyone has insights into why this strange texture issue is happening and how it can be fixed, your help would be greatly appreciated!
Thanks in advance!
Edit:
This is the result with texture.repeat.set( 2, 2 )
And this is what happens with texture.repeat.set( 10, 10 )
Increasing the texture repeat causes the texture to disappear and be replaced by a solid color...