用于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>

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

由于我的应用程序占用了整个窗口，因此我必须执行一些CSS来确保嵌套接口div不会引起任何滚动条。

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

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

这对我来说一直很好。