Search code examples
javascriptthree.jstexturesloader

THREE js: What is the probable cause of this texture tearing?

I have a problem where the textures I load with the TextureLoader are causing some tearing type error in the texture.

This is the code I use for the material:

    var textureName = "Melamine-wood-001";
var textureUrl = "textures/wood01/"+textureName+"/";
var loadedTextureName = textureUrl + textureName;
var textureExtention = ".png";
var textureWrappingAmount = 5; // texture wrapping amount (tiling)

// texture - texture msut not be in the same folder or there is an error.
textureDiffuse = new THREE.TextureLoader().load(loadedTextureName+textureExtention);

// Specular Map 
textureSpec = new THREE.TextureLoader().load(loadedTextureName +'_spec'+textureExtention);

// Normal Map 
textureNormal = new THREE.TextureLoader().load(loadedTextureName +'_normal'+textureExtention);

// Bump Map 
textureBump = new THREE.TextureLoader().load(loadedTextureName +'_displace'+textureExtention);

// Environment Map 
textureEnvironment = new THREE.TextureLoader().load('textures/envMaps/envMap.jpg');

// 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);

// 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
});

enter image description here

I am using the OBJLoader and r74.

This problem does not occur if I use a matCap shader.

// 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;

}

enter image description here

**Any ideas about what could be causing this would be appreciated.

Solution

  • What you are seeing is an artifact of self-shadowing. For more information, see this stackoverflow answer.

    Common work-arounds include moving the light source or adjusting the light.shadow.bias property.

    three.js r.75