6

three.js で png をテクスチャとして使用すると、奇妙な問題が発生します。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

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

おめでとうございます。テクセルからピクセルへのマッピングのトラップに直接遭遇しました。:)

これは WebGL ではありませんが、基本はまだ適用されます。

于 2013-07-03T16:25:50.440 に答える