three.js
JavaScript-bibliotek til 3D-filformater
Open Source JavaScript API til læsning, skrivning og gengivelse af WebGL, FBX, Collada samt OBJ-filformater via gratis 3D-bibliotek.
three.js er et open source letanvendeligt, rent JavaScript 3d-bibliotek, der giver softwareudviklere mulighed for at gengive WebGL-filer. Three.js-biblioteket tilbyder indlæsere til adskillige filformater som FBX, Collada samt OBJ, men det anbefalede format til import og eksport af data er glTF. Det fantastiske ved glTF-filformatet er, at det er meget kompakt og nemt kan overføres og også indlæses meget hurtigt.
Biblioteket understøtter flere vigtige funktioner relateret til 3D-modeller, såsom oprettelse af en scene, indlæsning af 3D-modeller, oprettelse af tekst, tegning af linjer ved at indstille et kamera, oprettelse af en geometrisk terning, tilføjelse af en terning til scenen, gengivelse af scene, tilføjelse af viewport til element, og mange flere. Der bruges forskellige kameraer i three.js-biblioteket.
Ved første øjekast
En oversigt over tre.js-funktioner.
- Opret 3D-scener
- Indlæser 3D-modeller
- Tegn linjer
- Læs/skriv FBX
- Læs/skriv Collada
- Konverter 3D-scener
- Eksporter data i glTF
- komponenthåndtering
- håndtere teksturer
three.js understøtter populære 3D-filformater anført nedenfor.
Platformuafhængighed
three.js kan køres på enhver moderne JavaScript-bundler, det mest populære valg er webpack.
- JavaScript
Kom godt i gang med three.js
Den nemmeste måde at installere three.js på er ved at bruge npm. Brug venligst følgende kommando for en problemfri installation.
Installer three.js via NPM
npm install --save three Opret scene ved hjælp af JavaScript
Open source-biblioteket three.js har givet support til at skabe en 3D-scene til at dreje en terning inde i deres egen JavaScript-applikation. For at vise noget med three.js kræver vi en scene, et kamera og en renderer. Du kan bruge forskellige kameraer og deres egenskaber til at fuldende scenen. Dernæst kan du bruge en renderer-instans og indstille den størrelse, som vi vil have den til at gengive vores app. Du kan beholde den lavere eller højere opløsning. Til sidst tilføjer du renderer-elementet (<canvas>) til dit HTML-dokument. Du kan nemt oprette en terning ved at bruge BoxGeometry og bruge materialet til at farve den. Derefter har du brug for et Mesh, der kan indsættes i scenen og flyttes efter dit behov.
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 Mesh that can be inserted into the scene and moved according to your need.
Indlæsning af 3D-modeller via JavaScript
Open source three.js-biblioteket giver softwareprogrammører mulighed for at indlæse 3D-modeller i deres egen applikation med blot et par linjer JavaScript-kode. 3D-modeller er tilgængelige i hundredvis af filformater. Hver model kommer med forskellige formål, forskellige funktioner og varierende kompleksitet. Først skal du have en loader, og derefter vil du være i stand til at indlæse scenen.
Tegn linjer i et diagram
Open source-biblioteket three.js har givet support til at tegne linjer eller cirkler inde i deres egen JavaScript-applikation. Til at starte med skal vi konfigurere rendereren, scenen og kameraet. Derefter skal du definere materialet og kan bruge LineBasicMaterial eller LineDashedMaterial. Efter materialet skal vi bruge geometri med nogle hjørner. Linjer tegnes mellem hvert på hinanden følgende par af hjørner.
