THREE.js中png纹理顶部和底部的文物v76
问题描述:
我在某些精灵的top and bottom两侧获得了一些artifacts。 These are the shaders我正在使用,如果有问题。我正在使用v76。THREE.js中png纹理顶部和底部的文物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);
})
答
不要设置你的纹理与THREE.RepeatWrapping
包裹。这可能会在纹理边缘留下意图用作精灵的伪影。
即使您的建议,我也无法修复它,尽管我最终得到了答案的混合,并在着色器中使用了alphaTest和值,直到它们“消失”到不可见 – bitten