THREE js：このテクスチャの引き裂きの原因は何でしょうか？

Question

TextureLoaderで読み込んだテクスチャがテクスチャに何らかのティアリングタイプのエラーを引き起こしているという問題があります。

これは私が材料に使用するコードです：

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

私はOBJLoaderとR74を使用しています。

この問題は、matCapシェーダーを使用している場合は発生しません。

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

}

**これを引き起こしている可能性がどの程度の任意のアイデアをいただければ幸いです。

Answer 1

あなたが見ているのは、自己シャドーイングのアーティファクトです。詳細については、this stackoverflow answerを参照してください。

一般的な回避策には、光源の移動やlight.shadow.biasプロパティの調整が含まれます。

three.js r.75