6

在 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 } );
4

5 回答 5

11

试试这个：

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

此外，在构建渲染器时不应使用抗锯齿：

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

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

于 2014-11-14T15:37:44.987 回答
5

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

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

请参阅此示例： http ://threejs.org/examples/#webgl_materials_blending_custom

于 2016-04-10T01:58:11.533 回答
4

恭喜，您已经直接遇到了 Texel-to-Pixel-mapping-trap。:)

这应该可以帮助您摆脱困境，尽管它不是 WebGL，但基础仍然适用。

于 2013-07-03T16:25:50.440 回答
0

好的，所以我尝试了此页面上的所有解决方案。他们都失败了。

对我有用的是对精灵纹理使用正确的Texture.wrapS（水平环绕）和Texture.wrapT（垂直环绕）。

我个人在我的精灵顶部发现了这个丑陋的边缘。我只需要确保我的Texture.wrapT设置是THREE.ClampToEdgeWrapping而不是THREE.RepeatWrapping.

完美解决了这个问题，而不会弄乱 alpha 测试值、纹理过滤器、顶点或抗锯齿。

于 2018-05-07T02:26:43.443 回答
-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;
            }

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

于 2013-08-20T13:07:34.523 回答