I am encountering an issue with the textures loaded using the TextureLoader, as they seem to be causing tearing errors within the texture.
Below is the code snippet I am using for the material:
var textureName = "Melamine-wood-001";
var textureUrl = "textures/wood01/"+textureName+"/";
var loadedTextureName = textureUrl + textureName;
var textureExtention = ".png";
var textureWrappingAmount = 5; // defined amount of texture wrapping
// Load diffuse texture
textureDiffuse = new THREE.TextureLoader().load(loadedTextureName+textureExtention);
// Load Specular Map
textureSpec = new THREE.TextureLoader().load(loadedTextureName +'_spec'+textureExtention);
// Load Normal Map
textureNormal = new THREE.TextureLoader().load(loadedTextureName +'_normal'+textureExtention);
// Load Bump Map
textureBump = new THREE.TextureLoader().load(loadedTextureName +'_displace'+textureExtention);
// Load Environment Map
textureEnvironment = new THREE.TextureLoader().load('textures/envMaps/envMap.jpg');
// Configure Texture Wrapping
textureDiffuse.wrapS = THREE.RepeatWrapping;
textureDiffuse.wrapT = THREE.RepeatWrapping;
textureDiffuse.repeat.set(textureWrappingAmount,textureWrappingAmount);
textureSpec.wrapS = THREE.RepeatWrapping;
textureSpec.wrapT = THREE.RepeatWrapping;
textureSpec.repeat.set(textureWrappingAmount,textureWrappingAmount);
textureNormal.wrapS = THREE.RepeatWrapping;
textureNormal.wrapT = THREE.RepeatWrapping;
textureNormal.repeat.set(textureWrappingAmount,textureWrappingAmount);
textureBump.wrapS = THREE.RepeatWrapping;
textureBump.wrapT = THREE.RepeatWrapping;
textureBump.repeat.set(textureWrappingAmount,textureWrappingAmount);
// Create Textured Material
material01 = new THREE.MeshPhongMaterial({
map: textureDiffuse,
specularMap: textureSpec,
envMap: textureEnvironment,
bumpMap: textureBump,
normalMap: textureNormal,
normalScale: new THREE.Vector2( 0.15, 0.15 ),
specular: 0xffffff,
shininess: 30,
reflectivity: 0,
side: THREE.DoubleSide
});
https://i.sstatic.net/bgl7J.png
I am utilizing the OBJLoader alongside r74 version.
This issue does not persist if I use a matCap shader.
// Define matCap material
materialMatCap = new THREE.ShaderMaterial( {
uniforms: {
tMatCap: {
type: 't',
value: new THREE.TextureLoader().load( 'textures/matCap/ChromeB.png' )
},
},
vertexShader: document.getElementById( 'sem-vs' ).textContent,
fragmentShader: document.getElementById( 'sem-fs' ).textContent,
shading: THREE.SmoothShading,
side: THREE.DoubleSide
} );
THREE.ClampToEdgeWrapping;
}
https://i.sstatic.net/n3tih.png
**Any insights on what might be triggering this issue would be greatly appreciated.