three.js
JavaScript bibliotēka 3D failu formātiem
Atvērtā pirmkoda JavaScript API WebGL, FBX, Collada, kā arī OBJ failu formātu lasīšanai, rakstīšanai un renderēšanai, izmantojot bezmaksas 3D bibliotēku.
three.js ir atvērtā pirmkoda viegli lietojama, tīra JavaScript 3D bibliotēka, kas programmatūras izstrādātājiem sniedz iespēju renderēt WebGL failus. Trīs.js bibliotēka piedāvā ielādētājus daudziem failu formātiem, piemēram, FBX, Collada, kā arī OBJ, taču ieteicamais datu importēšanas un eksportēšanas formāts ir glTF. Lieliskā lieta glTF faila formātā ir tā, ka tas ir ļoti kompakts, to var viegli pārsūtīt, kā arī ļoti ātri tiek ielādēts.
Bibliotēka atbalsta vairākas svarīgas funkcijas, kas saistītas ar 3D modeļiem, piemēram, ainas izveidi, 3D modeļu ielādi, teksta izveidi, līniju zīmēšanu, kameras iestatīšanu, ģeometriskā kuba izveidi, kuba pievienošanu ainai, ainas renderēšanu, skata loga pievienošanu elementam, un vēl daudz vairāk. Trīs.js bibliotēkā tiek izmantotas dažādas kameras.
Īsumā
Trīs.js funkciju pārskats.
- Izveidojiet 3D ainas
- Notiek 3D modeļu ielāde
- Zīmēt līnijas
- Lasīt/rakstīt FBX
- Lasīt/rakstīt Collada
- Pārveidojiet 3D ainas
- Eksportēt datus glTF
- komponentu apstrāde
- roktura faktūras
Three.js atbalsta tālāk norādītos populāros 3D failu formātus.
Platformas neatkarība
three.js var palaist jebkurā modernā JavaScript komplektētājā, vispopulārākā izvēle ir tīmekļa pakotne.
- JavaScript
Darba sākšana ar three.js
Vienkāršākais veids, kā instalēt three.js, ir izmantot npm. Lūdzu, izmantojiet šo komandu vienmērīgai instalēšanai.
Instalējiet three.js, izmantojot NPM
npm install --save three Izveidojiet ainu, izmantojot JavaScript
Atvērtā pirmkoda bibliotēka three.js ir nodrošinājusi atbalstu 3D ainas izveidei kuba griešanai savā JavaScript lietojumprogrammā. Lai parādītu jebko ar three.js, mums ir nepieciešams sižets, kamera un renderētājs. Lai pabeigtu ainu, varat izmantot dažādas kameras un to atribūtus. Pēc tam varat izmantot renderētāja gadījumu un iestatīt izmēru, kādā mēs vēlamies, lai tā renderētu mūsu lietotni. Varat saglabāt zemāku vai augstāku izšķirtspēju. Visbeidzot savam HTML dokumentam pievienojiet elementu renderētājs (<canvas>). Jūs varat viegli izveidot kubu, izmantojot BoxGeometry un izmantojot materiālu, lai to krāsotu. Pēc tam jums ir nepieciešams tīkls, ko var ievietot ainā un pārvietot atbilstoši jūsu vajadzībām.
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 renderētājs. You can use different cameras and their attribute to complete the scene. Next, you can use a renderētājs 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 renderētājs 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 Tīkls that can be inserted into the scene and moved according to your need.
3D modeļu ielāde, izmantojot JavaScript
Atvērtā pirmkoda three.js bibliotēka ļauj programmatūras programmētājiem ielādēt 3D modeļus savā lietojumprogrammā, izmantojot tikai dažas JavaScript koda rindiņas. 3D modeļi ir pieejami simtiem failu formātu. Katram modelim ir dažādi mērķi, dažādas funkcijas un dažādas sarežģītības pakāpes. Pirmkārt, jums ir jābūt iekrāvējam, un pēc tam jūs varēsit ielādēt ainu.
Zīmējiet līnijas diagrammā
Atvērtā pirmkoda bibliotēka three.js ir nodrošinājusi atbalstu līniju vai apļu zīmēšanai savā JavaScript lietojumprogrammā. Lai sāktu, mums ir jāiestata renderētājs, aina un kamera. Pēc tam jums ir jādefinē materiāls un varat izmantot LineBasicMaterial vai LineDashedMaterial. Pēc materiāla mums būs nepieciešama ģeometrija ar dažām virsotnēm. Starp katru secīgo virsotņu pāri tiek novilktas līnijas.
