three.js
JavaScript-kirjasto 3D-tiedostomuodoille
Avoimen lähdekoodin JavaScript-sovellusliittymä WebGL-, FBX-, Collada- ja OBJ-tiedostomuotojen lukemiseen, kirjoittamiseen ja hahmontamiseen ilmaisen 3D-kirjaston kautta.
three.js on avoimen lähdekoodin helppokäyttöinen, puhdas JavaScript 3D-kirjasto, joka antaa ohjelmistokehittäjille mahdollisuuden hahmontaa WebGL-tiedostoja. Three.js-kirjasto tarjoaa lataajia lukuisille tiedostomuodoille, kuten FBX, Collada sekä OBJ, mutta suositeltu tiedostomuoto tietojen tuontiin ja vientiin on glTF. Hienoa glTF-tiedostomuodossa on, että se on erittäin kompakti ja helposti siirrettävissä ja myös latautuu erittäin nopeasti.
Kirjasto tukee useita tärkeitä 3D-malleihin liittyviä ominaisuuksia, kuten näkymän luominen, 3D-mallien lataaminen, tekstin luominen, viivojen piirtäminen kameran asettamiseen, geometrisen kuution luominen, kuution lisääminen näkymään, näkymän renderöiminen, näkymän lisääminen elementtiin, ja paljon muuta. Three.js-kirjastossa käytetään erilaisia kameroita.
Yhdellä silmäyksellä
Yleiskatsaus three.js-ominaisuuksista.
- Luo 3D-kohtauksia
- Ladataan 3D-malleja
- Piirtää viivoja
- Lue/kirjoita FBX
- Lue/kirjoita Collada
- Muunna 3D-kohtauksia
- Vie tiedot glTF:ssä
- komponenttien käsittelyyn
- käsitellä tekstuureja
three.js tukee alla lueteltuja suosittuja 3D-tiedostomuotoja.
Alustan riippumattomuus
three.js voidaan suorittaa missä tahansa nykyaikaisessa JavaScript-niputtajassa, suosituin vaihtoehto on verkkopaketti.
- JavaScript
Three.js:n käytön aloittaminen
Helpoin tapa asentaa three.js on käyttää npm:ää. Käytä seuraavaa komentoa sujuvaan asennukseen.
Asenna thre.js NPM:n kautta
npm install --save three Luo kohtaus JavaScriptillä
Avoimen lähdekoodin kirjasto three.js on tarjonnut tukea 3D-näkymän luomiseen kuution pyörittämiseen oman JavaScript-sovelluksensa sisällä. Tarvitsemme näkymän, kameran ja renderöijän näyttääksesi mitä tahansa three.js:n avulla. Voit käyttää erilaisia kameroita ja niiden ominaisuuksia viimeistelemään kohtauksen. Seuraavaksi voit käyttää renderöintiinstanssia ja määrittää koon, jolla haluamme sen renderöivän sovelluksemme. Voit pitää pienemmän tai korkeamman resoluution. Lisää lopuksi renderer-elementti (<canvas>) HTML-dokumenttiisi. Voit luoda kuution helposti käyttämällä BoxGeometryä ja käyttämällä materiaalia sen värittämiseen. Sen jälkeen tarvitset Mesh-verkon, joka voidaan työntää kohtaukseen ja siirtää tarpeidesi mukaan.
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öijä. You can use different cameras and their attribute to complete the scene. Next, you can use a renderöijä 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öijä 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 Mesh that can be inserted into the scene and moved according to your need.
Ladataan 3D-malleja JavaScriptin kautta
Avoimen lähdekoodin three.js-kirjaston avulla ohjelmoijat voivat ladata 3D-malleja omaan sovellukseensa vain parilla JavaScript-koodirivillä. 3D-malleja on saatavilla sadoissa tiedostomuodoissa. Jokaisella mallilla on eri käyttötarkoitukset, sekalaiset ominaisuudet ja vaihteleva monimutkaisuus. Ensinnäkin sinulla on oltava latauslaite ja sen jälkeen voit ladata kohtauksen.
Piirrä viivoja kaavioon
Avoimen lähdekoodin kirjasto three.js on tarjonnut tukea viivojen tai ympyröiden piirtämiseen oman JavaScript-sovelluksensa sisällä. Aluksi meidän on määritettävä renderöijä, kohtaus ja kamera. Tämän jälkeen sinun on määriteltävä materiaali ja voit käyttää LineBasicMaterial- tai LineDashedMaterialia. Materiaalin jälkeen tarvitsemme geometrian joidenkin kärkien kanssa. Jokaisen peräkkäisen kärkiparin väliin vedetään viivat.
