7

three.jsシーンのオブジェクトにフォーム、ボタン、チェックボックスなどのGUIコントロールを「アタッチ」するための良いアプローチは何ですか?

つまり、3D モデルを表示し、ユーザーがそのモデルをクリックして選択できるようにし、ポップアップ メニューを表示して、プロパティを設定したり、他のアクションを実行したりできるフォームに誘導したいと考えています。

( JMonkeyEngine を使用する場合、大まかな同等物はおそらくNifty GUIになります。)

4

2 に答える 2

6

Three.js raycaster で jQuery UI コンポーネントを使用しています。

私のHTMLで：

<div id="main-canvas">
    <div id="interface">
        markup for your various modals, etc...
    </div>
</div>

ここでDoob 氏のレイキャスティングの例を使用して、キャンバス上のクリックを処理します。光線がオブジェクトに当たると、jQuery UI コンポーネントのコードを起動します。たとえば、ユーザーが惑星の球体オブジェクトをクリックすると、モーダルが起動します。モーダルでは、WebGL キャンバスで発生することをトリガーできます。

私のアプリケーションはウィンドウ全体を占有するため、ネストされたインターフェイス div によってスクロールバーが表示されないように、CSS を実行する必要がありました。

body {
    background-color: black;
    margin: 0px;
}

div#interface {
    position:absolute;
    width: 100%;
}

これは私にとって非常にうまく機能しています。

于 2013-04-07T19:23:57.837 に答える
3

dat.GUI は Three.js ユーザーの間で人気のあるライブラリです: http://code.google.com/p/dat-gui/ /examples/js/libs/ の下の Three.js ディストリビューションにも含まれています。

使用例を次に示します: http://jabtunes.com/labs/3d/dof/webgl_postprocessing_dof2.html

私が見つけた唯一の問題は、組み込みのコントロールに満足していない場合、カスタム コントロール/ウィジェットを作成するのが難しいということです。それはまだかなり良いです。

マウスでオブジェクトを選択/アクティブ化するには、「three.js picking」などをグーグルで検索するだけで十分な情報があります。

于 2013-04-01T16:03:12.927 に答える