three.js
JavaScript-bibliotek för 3D-filformat
Open Source JavaScript API för att läsa, skriva och rendera WebGL, FBX, Collada samt OBJ-filformat via gratis 3D-bibliotek.
three.js är ett lättanvänt, rent JavaScript 3d-bibliotek med öppen källkod som ger mjukvaruutvecklare möjlighet att rendera WebGL-filer. Three.js-biblioteket erbjuder laddare för många filformat som FBX, Collada samt OBJ men det rekommenderade formatet för att importera och exportera data är glTF. Det fantastiska med glTF-filformatet är att det är väldigt kompakt och enkelt kan överföras och även laddas väldigt snabbt.
Biblioteket stöder flera viktiga funktioner relaterade till 3D-modeller som att skapa en scen, ladda 3D-modeller, skapa text, rita linjer för att ställa in en kamera, skapa en geometrisk kub, lägga till en kub till scenen, rendera scenen, lägga till viewport till element, och många fler. Det finns olika kameror som används i three.js-biblioteket.
En överblick
En översikt över tre.js-funktioner.
- Skapa 3D-scener
- Laddar 3D-modeller
- Rita linjer
- Läs/skriv FBX
- Läs/skriv Collada
- Konvertera 3D-scener
- Exportera data i glTF
- komponenthantering
- hantera texturer
three.js stöder populära 3D-filformat som anges nedan.
Plattformsoberoende
three.js kan köras på alla moderna JavaScript-buntar, det mest populära valet är webpack.
- JavaScript
Komma igång med three.js
Det enklaste sättet att installera three.js är att använda npm. Använd följande kommando för en smidig installation.
Installera three.js via NPM
npm install --save three Skapa scen med JavaScript
Open source-biblioteket three.js har gett stöd för att skapa en 3D-scen för att snurra en kub i sin egen JavaScript-applikation. För att visa något med three.js behöver vi en scen, kamera och renderare. Du kan använda olika kameror och deras attribut för att fullborda scenen. Därefter kan du använda en renderarinstans och ställa in storleken på vilken vi vill att den ska rendera vår app. Du kan behålla den lägre eller högre upplösningen. Slutligen lägger du till elementet renderer (<canvas>) i ditt HTML-dokument. Du kan enkelt skapa en kub genom att använda BoxGeometry och använda materialet för att färga den. Efter det behöver du ett Mesh som kan infogas i scenen och flyttas efter ditt 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 renderare. You can use different cameras and their attribute to complete the scene. Next, you can use a renderare 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 renderare 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 Maska that can be inserted into the scene and moved according to your need.
Laddar 3D-modeller via JavaScript
Three.js-biblioteket med öppen källkod tillåter programvaruprogrammerare att ladda 3D-modeller i sin egen applikation med bara ett par rader JavaScript-kod. 3D-modeller finns i hundratals filformat. Varje modell kommer med olika syften, olika funktioner och varierande komplexitet. Först måste du ha en laddare och efter det kommer du att kunna ladda scenen.
Rita linjer i ett diagram
Open source-biblioteket three.js har gett stöd för att rita linjer eller cirklar i sin egen JavaScript-applikation. Till att börja med måste vi ställa in renderaren, scenen och kameran. Efter det måste du definiera materialet och kan använda LineBasicMaterial eller LineDashedMaterial. Efter materialet kommer vi att behöva geometri med några hörn. Linjer dras mellan varje på varandra följande hörnpar.
