ÜÇ js: Bu doku yırtılmasının muhtemel sebebi nedir?

Question

TextureLoader ile yüklediğim dokuların, dokuda bazı yırtılma tipi hatalara neden olduğu bir sorunum var.

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

Ben OBJLoader ve R74 kullanıyorum:

Bu

Ben malzeme için kullanmak koddur.

Bir matCap gölgelendirici kullanırsam bu sorun oluşmaz.

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

}

** Bu sebep ne olabilir hakkında herhangi bir fikir mutluluk duyacağız.

Answer 1

Gördüğünüz şey, kendi kendini gölgelemenin bir eseridir. Daha fazla bilgi için bkz. this stackoverflow answer.

Yaygın iş çevresinde ışık kaynağının taşınması veya light.shadow.bias özelliğinin ayarlanması dahildir.

Three.js r.75