Artifacts in loaded texture - Three js - three.js

Question

I am trying to render an object with UV maps and updating the texture with a loaded image thru Three JS. My problem is, I'm having artifacts on the rendered result. Why does this happen?
Notes:
Object is from a gltf file
I used blender for creating the model
I used KhronosGroup's blender gltf exporter for exporting the model
Image texture is 3239x2745 big
Here's my code
var inside_image = load_image("texture/inside.jpg");
var outside_image = load_image("texture/outside.jpg");
var textures = [];
Promise.all([inside_image, outside_image]).then((images)=>{
console.log('image', images);
for (var i in images) {
var canvas = document.createElement('canvas');
var compositeTexture = new THREE.Texture(canvas);
compositeTexture.wrapS = compositeTexture.wrapT = THREE.RepeatWrapping;
compositeTexture.repeat.y = -1;
var ctx = canvas.getContext('2d');
canvas.width = images[i].width;
canvas.height = images[i].height;
ctx.globalCompositeOperation = 'source-over';
ctx.fillRect(0,0,0,0);
ctx.drawImage(images[i], 0, 0, images[i].width, images[i].height);
compositeTexture.needsUpdate = true;
textures.push(compositeTexture);
}
loader.load(
'http://local.webgl.com/model.gltf',
function ( gltf ) {
console.log('gltf', gltf);
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
if (child.material.name == "Inside") {
child.material.map = textures[0];
} else {
child.material.map = textures[1];
}
console.log('child', child);
}
});
scene.add(gltf.scene);
// mixer = new THREE.AnimationMixer(gltf.scene);
// animations = gltf.animations;
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened', error );
}
);
});