GUI-System für three.js

Was ist ein guter Ansatz, um GUI-Steuerelemente wie Formulare, Schaltflächen, Checkboxen usw. an Objekte in einer three.js-Szene anzuhängen?GUI-System für three.js

Ich möchte ein 3D-Modell zeigen, den Benutzer anklicken und Dinge in diesem Modell auswählen und ein Popup-Menü anzeigen, das ihn zu Formularen führt, in denen er seine Eigenschaften festlegen, andere Aktionen ausführen kann . (wäre wahrscheinlich Nifty GUI eine grobe gleichwertig, wenn ich Jmonkeyengine verwenden waren.)

Quelle

2013-04-01 Pradyumna

Ich mache eine Menge davon in einem Spiel, an dem ich arbeite. Ich benutze jQuery UI, um Modale usw. anzuzeigen, und three.js raycasting, um Objekte zu erkennen. Ich werde Ihnen eine detailliertere Antwort geben, wenn ich nach Hause komme. – theblang

Entschuldigung für meine Verspätung, ich habe die Lösung, die ich verwende, in meinem eigenen Three.js Spielprojekt unten gepostet. – theblang

Ich verwende jQuery UI-Komponenten mit dem Three.js-Rycaster.

In meinem HTML:

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

Ich benutze das Ray-Casting Beispiel von Herrn Doob here zu Klicks auf meiner Leinwand handhaben. Wenn der Strahl auf ein Objekt trifft, feuere ich Teile des Codes für die jQuery UI-Komponenten ab. Öffnen Sie beispielsweise ein Modal, wenn der Benutzer auf ein Planetenkugelobjekt klickt. Im Modal können Sie auslösen, dass Dinge in Ihrem WebGL-Canvas passieren.

Da meine Anwendung das gesamte Fenster einnimmt, musste ich CSS ausführen, um sicherzustellen, dass die verschachtelte Schnittstelle div keine Bildlaufleisten verursachte.

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

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

Das hat wirklich gut für mich gearbeitet.

Quelle

2013-04-07 19:23:57 theblang

[Diese Frage SO] (http://stackoverflow.com/questions/12667507/drawing-ui-elements-directly-to-the-webgl-area-with-three-js) ist auch ein gutes Buch. – theblang

dat.GUI unter Three.js Benutzer für solche Dinge eine beliebte Bibliothek ist: http://code.google.com/p/dat-gui/ Es ist sogar in Three.js Verteilung vertreten , unter/examples/js/libs/

Hier ist ein Beispiel dafür: http://jabtunes.com/labs/3d/dof/webgl_postprocessing_dof2.html

Das einzige Problem, das ich gefunden habe, ist, dass es schwierig ist, benutzerdefinierte Steuerelemente/Widgets zu erstellen, wenn Sie mit den integrierten Steuerelementen nicht zufrieden sind. Es ist immer noch ziemlich gut.

Für die Auswahl/Aktivierung von Objekten mit der Maus gibt es viele Informationen, einfach google "three.js picking" oder so.

Quelle

2013-04-01 16:03:12 yaku

GUI-System für three.js

Antwort

Verwandte Themen