three.js
Biblioteka JavaScript dla formatów plików 3D
Open Source JavaScript API do czytania, pisania i renderowania formatów plików WebGL, FBX, Collada oraz OBJ za pośrednictwem bezpłatnej biblioteki 3D.
three.js to łatwa w użyciu, czysta biblioteka JavaScript 3D o otwartym kodzie źródłowym, która daje programistom możliwość renderowania plików WebGL. Biblioteka three.js oferuje programy ładujące dla wielu formatów plików, takich jak FBX, Collada oraz OBJ, ale zalecanym formatem importowania i eksportowania danych jest glTF. Wielką zaletą formatu plików glTF jest to, że jest bardzo kompaktowy i można go łatwo przesyłać, a także bardzo szybko ładować.
Biblioteka obsługuje kilka ważnych funkcji związanych z modelami 3D takich jak tworzenie sceny, ładowanie modeli 3D, tworzenie tekstu, rysowanie linii ustawienie kamery, tworzenie geometrycznej kostki, dodawanie kostki do sceny, renderowanie sceny, dodawanie rzutni do elementu, i wiele więcej. W bibliotece three.js używane są różne kamery.
W skrócie
Omówienie trzech funkcji pliku js.
- Twórz sceny 3D
- Ładowanie modeli 3D
- Rysować linie
- Odczyt/zapis FBX
- Odczyt/zapis Collada
- Konwertuj sceny 3D
- Eksportuj dane w glTF
- obsługa komponentów
- uchwyt tekstur
three.js obsługuje popularne formaty plików 3D wymienione poniżej.
Niezależność od platformy
three.js można uruchomić na dowolnym nowoczesnym pakiecie JavaScript, najpopularniejszym wyborem jest webpack.
- JavaScript
Pierwsze kroki z three.js
Najłatwiejszym sposobem zainstalowania pliku three.js jest użycie npm. Użyj następującego polecenia, aby uzyskać płynną instalację.
Zainstaluj trzy.js przez NPM
npm install --save three Utwórz scenę za pomocą JavaScript
Biblioteka open source three.js zapewniła obsługę tworzenia sceny 3D do obracania kostki we własnej aplikacji JavaScript. Aby wyświetlić cokolwiek za pomocą three.js, potrzebujemy sceny, kamery i renderera. Możesz użyć różnych kamer i ich atrybutów, aby ukończyć scenę. Następnie możesz użyć instancji renderera i ustawić rozmiar, w jakim chcemy renderować naszą aplikację. Możesz zachować niższą lub wyższą rozdzielczość. Na koniec dodajesz element renderer (<canvas>) do dokumentu HTML. Możesz łatwo stworzyć sześcian, używając BoxGeometry i używając materiału do jego pokolorowania. Następnie potrzebujesz Siatki, którą można wstawić do sceny i przenieść zgodnie z potrzebami.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Siatka that can be inserted into the scene and moved according to your need.
Ładowanie modeli 3D przez JavaScript
Biblioteka open source three.js umożliwia programistom ładowanie modeli 3D we własnej aplikacji za pomocą zaledwie kilku linijek kodu JavaScript. Modele 3D są dostępne w setkach formatów plików. Każdy model ma inne przeznaczenie, różne funkcje i różną złożoność. Najpierw musisz mieć loader, a potem będziesz mógł wczytać scenę.
Rysuj linie na diagramie
Biblioteka o otwartym kodzie źródłowym three.js zapewnia obsługę rysowania linii lub okręgów we własnej aplikacji JavaScript. Na początek musimy skonfigurować renderer, scenę i kamerę. Następnie musisz zdefiniować materiał i możesz użyć LineBasicMaterial lub LineDashedMaterial. Po materiale będziemy potrzebować geometrii z kilkoma wierzchołkami. Linie są rysowane między każdą kolejną parą wierzchołków.
