用于three.js的GUI系统

Question

将形式，按钮，复选框等GUI控件“附加”到three.js场景中的对象有什么好方法？

即，我想展示一个3D模型，让用户点击并选择该模型中的内容，然后看一个弹出式菜单，引导他找到可以设置其属性，执行其他操作等的表单。

（如果我使用JMonkeyEngine，那么粗略的等价可能是Nifty GUI。）

Answer 1

我使用带有Three.js raycaster的jQuery UI组件。

在我的HTML中：

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

我使用Doob先生here的光线投射示例来处理我画布上的点击。如果光线击中一个对象，我会触发jQuery UI组件的代码片段。例如，当用户单击行星球体对象时，触发打开模态。在模态中，您可以在WebGL画布中触发事件。

由于我的应用程序占用了整个窗口，我不得不做一些CSS来确保嵌套的接口div不会导致任何滚动条。

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

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

这对我来说非常好。

Answer 2

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

我发现的唯一问题是，如果您对内置控件不满意，很难创建自定义控件/小部件。它仍然相当不错。

使用鼠标选择/激活对象时，有大量信息，只需谷歌“three.js pick”等。