1

私は、three.jsでテキストを使用し、キャンバスに描画し、その結果をテクスチャとして使用する2番目のアプローチを試みています。次の問題を除いて、基本的には機能します-バグかどうかはわかりません：

背景が透明な2つのテキストを作成し、重ね合わせます。それらは大丈夫ですが、そのうちの1つを回転させると、透明度が台無しになります。

次の（抜粋）関数でテキストオブジェクトを作成します

function createText(text, ...){
    var textHolder = document.createElement( 'canvas' );
    var ctext = textHolder.getContext('2d');
    ...
    var tex = new THREE.Texture(textHolder);
    var mat = new THREE.MeshBasicMaterial( { map: tex, overdraw: true});
    mat.transparent = true;
    mat.map.needsUpdate = true;
    var textBoard = new THREE.Mesh(new THREE.PlaneGeometry(textHolder.width, textHolder.height),mat);
    textBoard.dynamic = true;
    textBoard.doubleSided = true;
    return textBoard;
}

それらをシーンに追加します。jsfiddleの完全なコードを使用したデモを参照してください

ここに画像の説明を入力してください

4

1 に答える 1

3

透過性は webGL ではトリッキーです。

あなたの場合の最善の解決策は、透明なテキスト素材に対して次のことを行うことです。

mat.depthTest = false;

更新されたフィドル: http://jsfiddle.net/SXA8n/4/

three.js r.55

于 2013-02-17T18:55:16.507 に答える