5

平面にテクスチャとして適用できるように、テキストを含む 2D テクスチャを手続き的に生成する方法を一日中探していました。基本的に、画像編集プログラムで作成されたテクスチャを使用するだけでなく、WebGL ページに表示されるテキストを変更できるようにしたいと考えています。完全に 2D のページと同じくらい簡単にページのコンテンツを編集できるようにすることを目指しています。コードを編集してバムするだけです。

これを達成するために私が見た中で最も有望な方法は、CSS を使用して空白のキャンバスにテキストをレンダリングし、ThreeJS が非常に簡単にするテクスチャとしてそのキャンバスを使用し、そのテクスチャをプレーンに適用して、 3D 環境。この例を私のニーズに合わせることで、これを達成しようとしました: http://jsfiddle.net/sSD65/28/

ただし、最終的には完全に黒いページになり、どこかにエラーがあることを示しています。私の人生では、見つけて修正することができないエラー。私は ThreeJS の経験がなく、実際には一般的に Javascript の経験が不足しているため、何かが足りないと感じているので、ここに助けを求めに来ました。

ここで得られる助けに本当に感謝しています。ここにページへのリンクがありますが、そこのフォルダーから画像をロードしているため、ローカルでホストしないと適切に表示できないと思いますが、Python はその点で優れています。そのフォルダーに移動したら、コンソールで Python -m SimpleHTTPServer を使用するだけで、ローカルでホストされ、"http://localhost:8000/homepage.html": https://dl からアクセスできるようになります。 dropbox.com/u/40043006/WebGLTest.zip

4

1 に答える 1

13

これは、キャンバスからテキストをテクスチャとして追加する簡単なコードです。

//create image
var bitmap = document.createElement('canvas');
var g = bitmap.getContext('2d');
bitmap.width = 100;
bitmap.height = 100;
g.font = 'Bold 20px Arial';

g.fillStyle = 'white';
g.fillText(text, 0, 20);
g.strokeStyle = 'black';
g.strokeText(text, 0, 20);

// canvas contents will be used for a texture
var texture = new THREE.Texture(bitmap) 
texture.needsUpdate = true;

出力テキストのサイズをキャンバスのサイズに設定するなど、いくつかの作業が必要です。

于 2012-09-12T07:55:16.840 に答える