System GUI dla three.js

Co to jest dobre podejście do "dołączania" elementów sterujących GUI, takich jak formularze, przyciski, pola wyboru itp. Do obiektów w scenie three.js?System GUI dla three.js

tj. Chciałbym pokazać model 3D, pozwolić użytkownikowi kliknąć i wybrać rzeczy w tym modelu, i zobaczyć menu podręczne, które prowadzi go do formularzy, które pozwalają mu ustawić jego właściwości, wykonywać inne akcje itp. .

(A szorstki odpowiednik prawdopodobnie byłby Nifty GUI gdybym używać JMonkeyEngine.)

Źródło

2013-04-01 Pradyumna

Wiele z tego robię w grze, nad którą pracuję. Używam jQuery UI do pokazywania modali itp. I raycasting three.js do wykrywania obiektów. Dam ci bardziej szczegółową odpowiedź, kiedy wrócę do domu. – theblang

Przepraszamy za zwłokę, opublikowałem rozwiązanie, którego używam w moim własnym projekcie gry Three.js poniżej. – theblang

Używam komponentów jQuery UI z raycasterem Three.js.

W moim HTML:

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

używam przykład ray casting od pana Dooba here do obsługi kliknięcia na moim płótnie. Jeśli promień trafi w obiekt, odpalam fragmenty kodu dla komponentów jQuery UI. Na przykład ogień otwórz modalny, gdy użytkownik kliknie na obiekt kuli planety. W modalu możesz wyzwalać rzeczy, które mają miejsce w kanwie WebGL.

Ponieważ moja aplikacja zajmuje całe okno, musiałem zrobić trochę CSS, aby upewnić się, że zagnieżdżony interfejs div nie spowodował żadnych pasków przewijania.

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

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

To działa bardzo dobrze dla mnie.

Źródło

2013-04-07 19:23:57 theblang

[To pytanie SO] (http://stackoverflow.com/questions/12667507/drawing-ui-elements-directly-to-the-webgl-area-with-three-js) to również dobra lektura. – theblang

dat.GUI jest popularny wśród Three.js użytkowników biblioteki do takich rzeczy: http://code.google.com/p/dat-gui/ to nawet zawarte w dystrybucji Three.js , w/examples/js/libs/

Oto jeden z przykładów użycia: http://jabtunes.com/labs/3d/dof/webgl_postprocessing_dof2.html

Jedynym problemem, jaki znalazłem, jest to, że trudno jest tworzyć niestandardowe elementy sterujące/widżety, jeśli nie są one zadowolone z wbudowanych elementów sterujących. Nadal jest całkiem niezły.

Do wybierania/aktywowania obiektów za pomocą myszki, jest mnóstwo informacji, wystarczy google "trójdźwiękowy" lub coś podobnego.

Źródło

2013-04-01 16:03:12 yaku

System GUI dla three.js

Odpowiedz

Powiązane problemy