3

次のコードでは、正投影カメラとテクスチャとしてプレーン ジオメトリにマップされたキャンバスを使用して、非常に基本的なシーンを設定しています。

透明なキャンバスに白いテキストを配置しましたが、canvas.toDataURL() を使用しても効果がありません。

ただし、キャンバスの内容をテクスチャとしてマテリアルに適用し、それを超標準的な 2D シーン内でレンダリングすると、テキストの輪郭が黒い線で囲まれます。これはおそらく、奇妙なアンチエイリアスが発生した結果です。この例では、レンダラーのクリア カラー、マテリアル、およびテキストはすべて真っ白です。

スクリーンショットは次のとおりです。スクリーンショット

var camera = new THREE.OrthographicCamera(window.innerWidth / - 2,
                                          window.innerWidth / 2, 
                                          window.innerHeight / 2, 
                                          window.innerHeight / - 2, 0, 10);

var scene = new THREE.Scene();

canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');

context.fillStyle = "white";
context.font = "bold 72px Arial";
context.fillText("Zibri", 50, 100);        

var texture = new THREE.Texture(canvas);
var geometry = new THREE.PlaneGeometry(canvas.width, canvas.height);

texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, transparent: true });
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff)

document.body.appendChild( renderer.domElement );

camera.lookAt(scene.position);
renderer.render(scene, camera);
4

1 に答える 1

4

私もこの問題に苦労してきました.WestLangleyのソリューションは問題を修正する途中でしたが、レンダリングされたテキストのアンチエイリアスエッジが非常に不十分でした. 広範な調査の結果、満足のいく解決策を思いつきました。その概要をここに示します。

テキストを描画する前に、キャンバスをテキストと同じ色で塗りつぶしますが、アルファを 0.01 に設定します。

context.fillStyle = 'rgba(255,255,255,0.01)';
context.fillRect(0,0,canvas.width,canvas.height);

次に、マテリアルの alphaTest プロパティを使用して、この不透明度のピクセルを破棄します。

var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: texture,
    transparent: true,
    alphaTest:0.01
});

最後に、テクスチャ マップの premultiplyAlpha 値を false に設定します。

texture.map.premultiplyAlpha = false;
texture.map.needsUpdate = true;
于 2015-07-13T03:54:21.753 に答える