GUI system for three.js

Question

What is a good approach to "attaching" GUI controls such as forms, buttons, checkboxes etc to objects in a three.js scene?

i.e., I'd like to show a 3D model, let the user click and pick things in that model, and see a pop-up menu that leads him to forms that let him set its properties, do other actions etc.

(A rough equivalent probably would be Nifty GUI if I were to use JMonkeyEngine.)

I am doing a lot of this in a game I am working on. I use jQuery UI to show modals, etc. and three.js raycasting to detect objects. I will give you a more detailed answer when I get home. — theblang, Apr 02 '13 at 21:32
Sorry for my delay, I have posted the solution I am using in my own Three.js game project below. — theblang, Apr 07 '13 at 19:25

score 6 · Accepted Answer · answered Apr 07 '13 at 19:23

I use jQuery UI components with the Three.js raycaster.

In my HTML:

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

I use the raycasting example from Mr. Doob here to handle clicks on my canvas. If the ray hits an object I fire off pieces of code for the jQuery UI components. For example, fire open a modal when the user clicks on a planet sphere object. In the modal you can trigger things to happen in your WebGL canvas.

Since my application takes up the entire window, I had to do some CSS to make sure the nested interface div didn't cause any scrollbars.

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

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

This has been working really well for me.

[This SO question](http://stackoverflow.com/questions/12667507/drawing-ui-elements-directly-to-the-webgl-area-with-three-js) is also a good read. — theblang, Jun 25 '13 at 17:55

score 3 · Answer 2 · answered Apr 01 '13 at 16:03

dat.GUI is a popular library among Three.js users for such things: http://code.google.com/p/dat-gui/ It's even included in Three.js distribution, under /examples/js/libs/

Here's one example of it in use: http://jabtunes.com/labs/3d/dof/webgl_postprocessing_dof2.html

The only problem I've found is that it is hard to create custom controls/widgets if you are not happy with the built-in controls. It's still pretty good.

For selecting/activating objects with mouse, there's plenty of information, just google "three.js picking" or something.

GUI system for three.js

2 Answers2