GUI système pour three.js

Ce qui est une bonne approche pour "fixer" les contrôles d'interface utilisateur graphique, tels que des formulaires, des boutons, des cases à cocher, etc à des objets dans un three.js scène?

c'est à dire, j'aimerais vous montrer un modèle 3D, permettent à l'utilisateur de cliquer et choisir des choses dans ce modèle, et de voir un menu pop-up, qui le conduit à des formes qui l'amenèrent à définir ses propriétés, de faire d'autres actions, etc.

(Un équivalent serait probablement Chouette GUI si je devais utiliser JMonkeyEngine.)

Je suis en train de faire beaucoup de cela dans un jeu que je suis en train de travailler sur. J'utilise jQuery UI pour montrer les auxiliaires modaux, etc. et three.js raycasting pour détecter des objets. Je vais vous donner une réponse plus détaillée quand je rentre à la maison.
Désolé pour mon retard, j'ai posté la solution que j'utilise dans mon propre Three.js projet de jeu ci-dessous.

OriginalL'auteur Pradyumna | 2013-04-01

  1. 5

    J'utilise jQuery composants de l'INTERFACE utilisateur avec l'Three.js raycaster.

    Dans mon code HTML:

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

    - Je utiliser le raycasting exemple de M. Dood ici pour gérer les clics sur ma toile. Si le rayon touche un objet que j'feu des morceaux de code pour le jQuery composants de l'INTERFACE utilisateur. Par exemple, le feu ouvert modale lorsque l'utilisateur clique sur une planète de la sphère de l'objet. Dans le modal, vous pouvez déclencher des choses dans votre WebGL toile.

    Depuis mon application reprend l'ensemble de la fenêtre, j'ai eu à faire un peu de CSS pour assurez-vous que le imbriquée interface div ne suis pas la cause des barres de défilement.

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

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

    Cela a très bien fonctionné pour moi.

    Ce DONC, la question c'est également une bonne lecture.

    OriginalL'auteur theblang

  2. 2

    dat.GUI est une bibliothèque populaire parmi Three.js les utilisateurs de telles choses: http://code.google.com/p/dat-gui/ C'est même inclus dans Three.js la distribution, en vertu de l' /exemples/js/libs/

    Voici un exemple d'utilisation: http://jabtunes.com/labs/3d/dof/webgl_postprocessing_dof2.html

    Le seul problème que j'ai trouvé est qu'il est difficile de créer des contrôles personnalisés/widgets si vous n'êtes pas heureux avec les contrôles intégrés. Il est toujours très bon.

    Pour sélectionner/activer les objets avec la souris, il ya beaucoup d'informations, il suffit de google "three.js picking" ou quelque chose.

    OriginalL'auteur yaku