THREE.js v76中png纹理顶部和底部的伪像

Question

我在某些精灵的artifacts方面获得了一些top and bottom。 These are the shaders我正在使用，如果重要的话。我正在使用v76。

我正在构建这些精灵：

var object = new THREE.Object3D();
var textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/image.png', function(texture) {
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.anisotropy = 16;
    var geometry = new THREE.PlaneBufferGeometry(15, 15);
    var material = new THREE.MeshPhongMaterial({
        map: texture,
        color: 0xffffff,
        transparent: true,
        alphaTest: 0.2,
        side: DoubleSide,
    });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    mesh.customDepthMaterial = new ShaderMaterial({
        uniforms: { texture: { type: 't', value: this.material.map } },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
    });
    object.add(mesh);
})

Answer 1

不要将纹理设置为使用THREE.RepeatWrapping换行。这可能会在纹理边缘留下意图用作精灵的瑕疵。