three.js透明png纹理奇怪边框webgl

Question

我在使用pngs作为three.js中的纹理时遇到了一个奇怪的问题.png在可见和透明之间的区域有奇怪的边界.我已经尝试过使用alphatest值,但有时候图像会在1px线条很薄的区域中完全消失.有解决方案如何解决这个问题？

var explosionTexture = new THREE.ImageUtils.loadTexture( 'explosion.png' );
        boomer = new TextureAnimator( explosionTexture, 4, 4, 16, 55 ); // texture, #horiz, #vert, #total, duration.
        var explosionMaterial = new THREE.MeshBasicMaterial( { map: explosionTexture } );
        explosionMaterial.transparent = true;
        var cube2Geometry = new THREE.PlaneGeometry( 64, 64, 1, 1 );
        cube2 = new THREE.Mesh( cube2Geometry, explosionMaterial );
        cube2.position.set(100,26,0);
        scene.add(cube2);


        // renderer

        //renderer = new THREE.WebGLRenderer( { antialias: false, premultipliedAlpha: true  } );
        renderer = new THREE.WebGLRenderer( { antialias: false } );

Answer 1

试试这个:

explosionTexture.anisotropy = 0;
explosionTexture.magFilter = THREE.NearestFilter;
explosionTexture.minFilter = THREE.NearestFilter;

此外,在构造渲染器时,不应使用反锯齿:

renderer = new THREE.WebGLRenderer({antialias: false});

这是预览我的世界纹理包,效果很好:-)

Answer 2

使用材料混合，以下配置对我有用：

material.blending = THREE.CustomBlending
material.blendSrc = THREE.OneFactor
material.blendDst = THREE.OneMinusSrcAlphaFactor

请参见以下示例：http : //threejs.org/examples/#webgl_materials_blending_custom

Answer 3

我是这样解决的：

            var c2GVertices = cube2Geometry.vertices;


            for (var i = 0; i < c2GVertices.length; i++) {
              c2GVertices[i].x =  c2GVertices[i].x - 0.5;
              c2GVertices[i].y =  c2GVertices[i].y - 0.5;
            }

有没有更简单的方法将所有顶点移动半个像素？