javascript - 三.js透明png纹理奇怪边框webgl

Question

在 three.js 中使用 pngs 作为纹理时，我遇到了一个奇怪的问题。 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});

这样做是为了预览我的世界纹理包，效果很好:-)