DREI js: Was ist die wahrscheinliche Ursache für das Reißen dieser Textur?

Question

Ich habe ein Problem, wo die Texturen, die ich mit dem TextureLoader lade, zu einigen Reißfehlern in der Textur führen.

Dies ist der Code, den ich für das Material verwenden:

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

ich die OBJLoader und R74 verwenden.

Dieses Problem tritt nicht auf, wenn ich einen matCap-Shader verwende.

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

}

** Alle Vorstellungen darüber, was dies würde geschätzt verursachen könnte.

Answer 1

Was Sie sehen, ist ein Artefakt der Selbstschattierung. Weitere Informationen finden Sie unter this stackoverflow answer.

Herkömmliche Arbeitsumgebungen umfassen das Verschieben der Lichtquelle oder das Anpassen der light.shadow.bias-Eigenschaft.

three.js r.75