three.js - three.jsの立方体の頂点にテキストを添付するにはどうすればよいですか? また、キューブ内の任意の場所にテキストを追加できますか?

Question

プロジェクトに three.js を使用してキューブを作成しようとしています。頂点とキューブ内のさまざまなポイントにテキストを追加する必要があります。これを行う方法はありますか？

Answer 1

Three.js で Sprite オブジェクトを使用する基本的なコード例については、以下をご覧ください。

http://stemkoski.github.com/Three.js/Sprites.html

また、スプライト テクスチャとして使用するテキストを含む画像を簡単に作成する方法については、次のサンプル コードを参照してください。

http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

この 2 つのアイデアを組み合わせることで、あなたのやりたいことが実現できると思います。

Answer 2

ラベル スタイルのテキストを使用して、テキストを特定のポイントから開始するが、常にカメラの方向を向き、カメラの位置に関係なく読みやすいようにする場合は、スプライトを使用できます。(キャンバスで作成されたテキスト ラベル スプライトの例: http://i.imgur.com/e9I68xD.jpg - ここでは、別のパスでレンダリングされ、シーンによって隠されることはありませんが、同じパスで実行できます。 )

それがあなたが探しているものである場合は、まずスプライトの例を確認し、静止画像をスプライトとしてシーン内の正しい位置に添付することを学ぶことをお勧めします。それが機能するようになったら、コードを変更して、標準の Javascript Canvas 関数を使用して画像キャンバスにテキストを生成し、その画像をスプライトとして使用します。