2012-07-12 8 views
7

目的は、メッシュ上にマウスを置いたまま、Three.Meshの名前をラベルとして表示することです。我々はThree.jsでこれを行う方法THREE.Meshにラベルを追加する方法は?

誰かがサンプルコードを与えることができますか?

+0

は、あなたが実際にはテキストをレンダリングしようとしていますシーンの一部?それは3Dテキストである必要がありますか?それとも、CSSでレンダラーの上に2Dマークアップをオーバーレイするのでしょうか?また、以前の回答を受け入れるか、多くの人があなたを助けてくれるのではないかと思います。 –

+0

ちょうどツールチップのようにラベルが必要です。マウスのホバーがメッシュ上で終了/停止したときにラベルを付ける方が良いでしょう。 CSSを使用してレンダラーの上に重ねて表示される2Dマークアップは大丈夫です。また、私の質問/回答のどれが受け入れられないのかを教えてください。私は見て、誰も受け入れられないままになることを願っています。私はXTK.js APIでそのようなラベルを見てきました –

答えて

27

挑戦可!

の作業のコード例では、時: http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

私は小さなサンプルプログラムに分かれているそれぞれのこの目標には3つの主要な手順、があるように思われます。

(1)マウスがポイントされているシーンエレメントを特定します。 参照:http://stemkoski.github.com/Three.js/Mouse-Over.html

(2)イメージとして表示するテキストをレンダリングします(これにはキャンバス要素を使用しました)。 参照:http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

(3)マウスポインタの位置でパート(2)からの画像を含むスプライトを描画します。 参照:私は、最小限の一連のThree.jsの可能性を披露しようとしていたにhttp://stemkoski.github.com/Three.js/Mouse-Sprite.html

すべてのこれらの例(およびそれ以上)、http://stemkoski.github.com/Three.js/で(詳細なコメント付き)入門としての私の成長のコレクションの一部であります例。また

、それが原因だクレジット:パーツ(1)及び(3)彼のgithubのページでMrDoobの例は、具体的にインタラクティブなキューブの例のいくつかに基づいています:http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html

+1

ありがとうLee Stemkoshi。あなたの例は素晴らしく、本当に役立ちます。 –

+1

@lee最新バージョンの方法はありますか?現在のバージョンの警告とエラーは... V71です –

+2

これにはもっと簡単な解決策がありますか?シーンにskinnedmeshesがあり、各メッシュの上に名前を表示したい場合の例?スプライトの問題はズームに応じて拡大縮小されます。同じままにしておきたい。それはちょうど周りのメッシュに従うべきです(頭に留まる)。 – majidarif

関連する問題