用於three.js的GUI系統

將three.js場景中的GUI控件（如窗體，按鈕，複選框等）「附加」到對象的一種好方法是什麼？用於three.js的GUI系統

即，我想展示一個3D模型，讓用戶點擊並選擇該模型中的東西，然後看到一個彈出式菜單，讓他看到讓他設置屬性的窗體，執行其他操作等。。

（大致相當於大概會Nifty GUI如果我使用JMonkeyEngine。）

2013-04-01 Pradyumna

我正在做的很多這個在我正在努力的遊戲中。我使用jQuery UI來顯示模式等，以及three.js raycasting來檢測對象。當我回家時，我會給你更詳細的答案。 – theblang

對不起，我已經發布了我在下面我自己的Three.js遊戲項目中使用的解決方案。 – theblang

我使用jQuery UI組件與Three.js raycaster。

在我的HTML：

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

我使用杜布先生here的光線投射例子來處理我的畫布點擊。如果光線擊中一個對象，我會爲jQuery UI組件啓動一些代碼。例如，當用戶點擊一個行星球體對象時，打開一個模式。在模態中，您可以觸發事件發生在您的WebGL畫布中。

由於我的應用程序佔用了整個窗口，我不得不做一些CSS來確保嵌套的界面div不會導致任何滾動條。

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

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

這對我來說真的很好。

2013-04-07 19:23:57 theblang

[This SO question]（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/

我發現的唯一問題是，如果您對內置控件不滿意，很難創建自定義控件/控件。它還是很不錯的。

對於用鼠標選擇/激活對象，有大量的信息，只是谷歌「three.js揀」或什麼的。

2013-04-01 16:03:12 yaku

回答