three.js
JavaScript-bibliotek for 3D-filformater
Open Source JavaScript API for lesing, skriving og gjengivelse av WebGL, FBX, Collada samt OBJ-filformater via gratis 3D-bibliotek.
three.js er et åpen kildekode som er lett å bruke, rent JavaScript 3d-bibliotek som gir programvareutviklere muligheten til å gjengi WebGL-filer. Three.js-biblioteket tilbyr lastere for en rekke filformater som FBX, Collada samt OBJ, men det anbefalte formatet for import og eksport av data er glTF. Det fine med glTF-filformatet er at det er veldig kompakt og enkelt kan overføres og lastes også veldig raskt.
Biblioteket støtter flere viktige funksjoner knyttet til 3D-modeller som å lage en scene, laste 3D-modeller, lage tekst, tegne linjer som setter et kamera, lage en geometrisk kube, legge til en kube til scenen, gjengi scenen, legge til viewport til element, og mange flere. Det er forskjellige kameraer som brukes i three.js-biblioteket.
Med et blikk
En oversikt over tre.js-funksjoner.
- Lag 3D-scener
- Laster 3D-modeller
- Tegn linjer
- Les/skriv FBX
- Les/skriv Collada
- Konverter 3D-scener
- Eksporter data i glTF
- håndtering av komponenter
- håndtere teksturer
three.js støtter populære 3D-filformater oppført nedenfor.
Plattformuavhengighet
three.js kan kjøres på en hvilken som helst moderne JavaScript-pakke, det mest populære valget er webpack.
- JavaScript
Komme i gang med three.js
Den enkleste måten å installere three.js på er å bruke npm. Bruk følgende kommando for en jevn installasjon.
Installer three.js via NPM
npm install --save three Lag scene ved hjelp av JavaScript
Åpen kildekode-biblioteket three.js har gitt støtte for å lage en 3D-scene for å spinne en kube i deres egen JavaScript-applikasjon. For å vise noe med three.js trenger vi en scene, et kamera og en renderer. Du kan bruke forskjellige kameraer og deres attributter for å fullføre scenen. Deretter kan du bruke en gjengivelsesforekomst og angi størrelsen som vi vil at den skal gjengi appen vår med. Du kan beholde lavere eller høyere oppløsning. Til slutt legger du til renderer-elementet (<canvas>) i HTML-dokumentet. Du kan enkelt lage en kube ved å bruke BoxGeometry og bruke materialet til å fargelegge den. Etter det trenger du et Mesh som kan settes inn i scenen og flyttes etter 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 gjengiver. You can use different cameras and their attribute to complete the scene. Next, you can use a gjengiver 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 gjengiver 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.
Laster 3D-modeller via JavaScript
Three.js-biblioteket med åpen kildekode lar programvareprogrammerere laste 3D-modeller inn i sin egen applikasjon med bare et par linjer med JavaScript-kode. 3D-modeller er tilgjengelige i hundrevis av filformater. Hver modell kommer med forskjellige formål, diverse funksjoner og varierende kompleksitet. Først må du ha en laster, og etter det vil du kunne laste scenen.
Tegn linjer i et diagram
Open source-biblioteket three.js har gitt støtte for å tegne linjer eller sirkler inne i deres egen JavaScript-applikasjon. Til å begynne med må vi sette opp rendereren, scenen og kameraet. Etter det må du definere materialet og kan bruke LineBasicMaterial eller LineDashedMaterial. Etter materialet vil vi trenge geometri med noen toppunkter. Linjer trekkes mellom hvert påfølgende par av hjørner.
