GUI system for three.js

jquery-ui, three.js

Solution

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.

Problem

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.)

Original source

Related problems