jquery-ui - Three.js 的 GUI 系统

Question

将表单、按钮、复选框等 GUI 控件“附加”到 three.js 场景中的对象的好方法是什么？

即，我想展示一个 3D 模型，让用户单击并选择该模型中的东西，然后看到一个弹出菜单，该菜单将他引导到允许他设置其属性、执行其他操作等的表单。

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

score 6 · Accepted Answer

我将 jQuery UI 组件与 Three.js raycaster 一起使用。

在我的 HTML 中：

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

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

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

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

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

这对我来说非常有效。

score 3 · Accepted Answer

dat.GUI 是 Three.js 用户中用于此类事情的流行库：http ://code.google.com/p/dat-gui/它甚至包含在 Three.js 发行版中，位于 /examples/js/libs/ 下

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

对于用鼠标选择/激活对象，有很多信息，只需谷歌“three.js Picking”之类的。

2 回答 2