Three.js 的 GUI 系统答案

【问题标题】：GUI system for three.jsThree.js 的 GUI 系统
【发布时间】：2013-04-08 03:23:57
【问题描述】：

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

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

（如果我使用 JMonkeyEngine，大概的等价物可能是 Nifty GUI。）

【问题讨论】：

【解决方案1】：

我将 jQuery UI 组件与 Three.js 光线投射器一起使用。

在我的 HTML 中：

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

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

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

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

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

这对我来说效果很好。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：