three.js
Biblioteca JavaScript pentru formate de fișiere 3D
Open Source JavaScript API pentru citirea, scrierea și redarea formatelor de fișiere WebGL, FBX, Collada și OBJ prin biblioteca 3D gratuită.
three.js este o bibliotecă 3d JavaScript pur, cu sursă deschisă, ușor de utilizat, care oferă dezvoltatorilor de software capacitatea de a reda fișiere WebGL. Biblioteca three.js oferă încărcătoare pentru numeroase formate de fișiere, cum ar fi FBX, Collada și OBJ, dar formatul recomandat pentru importarea și exportul datelor este glTF. Lucrul minunat despre formatul de fișier glTF este că este foarte compact și poate fi transmis cu ușurință și, de asemenea, se încarcă foarte repede.
Biblioteca acceptă câteva caracteristici importante legate de modelele 3D, cum ar fi crearea unei scene, încărcarea modelelor 3D, crearea de text, trasarea liniilor setarea unei camere, crearea unui cub geometric, adăugarea unui cub la scenă, redarea scenei, adăugarea unei ferestre de vizualizare la element, si multe altele. Există diferite camere folosite în biblioteca three.js.
La O privire
O prezentare generală a funcțiilor three.js.
- Creați scene 3D
- Se încarcă modele 3D
- Desenați linii
- Citiți/Scrieți FBX
- Citește/Scrie Collada
- Convertiți scene 3D
- Exportați datele în glTF
- manipularea componentelor
- manevrează texturi
three.js acceptă formatele de fișiere 3D populare enumerate mai jos.
Independența platformei
three.js poate fi rulat pe orice pachet JavaScript modern, cea mai populară alegere este webpack.
- JavaScript
Noțiuni introductive cu three.js
Cel mai simplu mod de a instala three.js este prin utilizarea npm. Vă rugăm să utilizați următoarea comandă pentru o instalare fără probleme.
Instalați three.js prin NPM
npm install --save three Creați o scenă folosind JavaScript
Biblioteca open source three.js a oferit suport pentru crearea unei scene 3D pentru rotirea unui cub în interiorul propriei aplicații JavaScript. Pentru a afișa orice cu three.js, avem nevoie de o scenă, cameră și redare. Puteți folosi diferite camere și atributele lor pentru a finaliza scena. În continuare, puteți utiliza o instanță de redare și puteți seta dimensiunea la care dorim să redea aplicația noastră. Puteți păstra rezoluția mai mică sau mai mare. În cele din urmă, adăugați elementul renderer (<canvas>) în documentul dvs. HTML. Puteți crea cu ușurință un cub folosind BoxGeometry și folosind materialul pentru a-l colora. După aceea, aveți nevoie de o Mesh care poate fi introdusă în scenă și mutată în funcție de nevoile dvs.
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 redator. You can use different cameras and their attribute to complete the scene. Next, you can use a redator 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 redator 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 Plasă that can be inserted into the scene and moved according to your need.
Încărcarea modelelor 3D prin JavaScript
Biblioteca open source three.js permite programatorilor de software să încarce modele 3D în cadrul propriei aplicații cu doar câteva linii de cod JavaScript. Modelele 3D sunt disponibile în sute de formate de fișiere. Fiecare model vine cu scopuri diferite, caracteristici diverse și complexitate diferită. În primul rând, trebuie să aveți un încărcător și după aceea, veți putea încărca scena.
Desenați linii într-o diagramă
Biblioteca open source three.js a oferit suport pentru desenarea liniilor sau a cercurilor în interiorul propriei aplicații JavaScript. Pentru început, trebuie să setăm redarea, scena și camera. După aceea, trebuie să definiți materialul și puteți utiliza LineBasicMaterial sau LineDashedMaterial. După material, vom avea nevoie de geometrie cu câteva vârfuri. Sunt trasate linii între fiecare pereche consecutivă de vârfuri.
