2017-10-18 9 views
0

四角いパーティクルが浮かんでいるフォークされたthree.js codepen実験があります。three.js:パーティクルの代わりにパーティクルクラウドにテキストを渡します。

しかし、私はそれにテキスト(ジオメトリ)を渡すことができるように修正しようとしています。正方形の粒子を置き換えて、やや単語/タグクラウドに似ています。これは可能ですか?現在codepenへ

リンク: https://codepen.io/farisk/pen/pWQGxB

相続人は私が達成したいものを: enter image description here

私は現在、どこから始めればわかりません。

私は何とかテキストジオメトリ

var loader = new THREE.FontLoader(); 
let font = loader.parse(fontJSON); 
var geometry = new THREE.TextGeometry("hello", {font: font, size: 120, height: 10, material: 0}); 

を使用して考えていた誰かが、これは正しい方法ではないことを述べましたか?私はthree.js/htmlキャンバスにはかなり新しいので、どんな助けもありがとうございます。

答えて

1

パーティクルごとにジオメトリを渡すことは通常、パーティクルシステムでは不可能です。これは、各パーティクルに対して同じジオメトリがこれらのシステムを効率的にするためです。

  • 単一スプライトのテクスチャにすべてのテキストをレンダリングし、各粒子が正しいテキストをレンダリングするような各粒子のためのテクスチャ座標を提供します。あなたはそこを探している効果を達成するために

    には、2つのオプションは基本的にあります。 (テキストの2次元レンダリングのみで、大量のテキストではスケーリングできません)exampleを参照してください。

  • 各テキストオブジェクトを独自のジオメトリにし、パーティクルシステムなしでレンダリングします。

実際にタグクラウドを実現したい場合は、純粋なJavaScriptを使用して、計算された3D位置に応じてテキスト要素の位置を変換することもできます。

+0

私はおそらくTagCanvas.jsのようなものに落ち着くでしょう。先端に感謝します。 – wsgg

関連する問題