三个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