フォーム、ボタン、チェックボックスなどのGUIコントロールをthree.jsシーンのオブジェクトに「接続する」ための良いアプローチは何ですか？three.jsのGUIシステム
つまり、3Dモデルを表示して、そのモデル内のアイテムをクリックして選択させ、そのプロパティを設定するフォームにつながるポップアップメニューを表示したり、その他の操作などをしたい。
（私はJMonkeyEngineを使用した場合と同等ラフはおそらくNifty GUIだろう。）
私は、Three.jsレイキャスターでjQuery UIコンポーネントを使用します。私のHTMLで
：
<div id="main-canvas">
<div id="interface">
markup for your various modals, etc...
</div>
</div>
私は私のキャンバス上でクリックを処理するために氏Doob hereからレイキャスティングの例を使用します。レイがオブジェクトに当たった場合、私はjQuery UIコンポーネント用のコードを起動します。たとえば、ユーザーが惑星球オブジェクトをクリックしたときにモーダルを開始します。モーダルでは、WebGLキャンバスで起こるようなことを引き起こすことができます。
私のアプリケーションはウィンドウ全体を占有しているので、ネストされたインターフェイスdivがスクロールバーを生成していないことを確認するためにいくつかのCSSを実行する必要がありました。
body {
background-color: black;
margin: 0px;
}
div#interface {
position:absolute;
width: 100%;
}
これは本当にうまく機能しています。
[こちらの質問です]（http://stackoverflow.com/questions/12667507/drawing-ui-elements-directly-to-the-webgl-area-with-three-js）も良い読書です。 – theblang
dat.GUIは、そのようなもののためにThree.jsユーザーの間で人気のライブラリです：http://code.google.com/p/dat-gui/それはでもThree.jsのディストリビューションに含まれています、/ examples/js/libs/
使用例：http://jabtunes.com/labs/3d/dof/webgl_postprocessing_dof2.html
私が見つけた唯一の問題は、組み込みのコントロールがうまくいかない場合、カスタムコントロール/ウィジェットを作成することが難しいことです。それはまだかなり良いです。
マウスでオブジェクトを選択/アクティブ化するには、たくさんの情報がありますが、Googleの「three.js picking」などがあります。
私が取り組んでいるゲームでこれをたくさんしています。 jQuery UIを使用してモーダルなどを表示し、オブジェクトを検出するためのraycastingを実行します。私が家に帰ると、私はあなたにもっと詳細な答えを与えます。 – theblang
遅れて申し訳ありませんが、私は自分のThree.jsゲームプロジェクトで以下のソリューションを使用しています。 – theblang