three.js
JavaScript-bibliotheek voor 3D-bestandsindelingen
Open Source JavaScript API voor het lezen, schrijven en weergeven van WebGL-, FBX-, Collada- en OBJ-bestandsindelingen via gratis 3D-bibliotheek.
three.js is een gebruiksvriendelijke open source, pure JavaScript 3D-bibliotheek die softwareontwikkelaars de mogelijkheid geeft om WebGL-bestanden weer te geven. De three.js-bibliotheek biedt laders voor tal van bestandsindelingen zoals FBX, Collada en OBJ, maar het aanbevolen formaat voor het importeren en exporteren van gegevens is glTF. Het mooie van het glTF-bestandsformaat is dat het erg compact is en gemakkelijk kan worden verzonden en ook erg snel laadt.
De bibliotheek ondersteunt verschillende belangrijke functies met betrekking tot 3D-modellen, zoals het maken van een scène, het laden van 3D-modellen, het maken van tekst, het tekenen van lijnen die een camera instellen, het maken van een geometrische kubus, het toevoegen van een kubus aan de scène, het renderen van de scène, het toevoegen van een viewport aan het element, en nog veel meer. Er worden verschillende camera's gebruikt in de three.js-bibliotheek.
In een oogopslag
Een overzicht van drie.js-functies.
- 3D-scènes maken
- 3D-modellen laden
- Teken lijnen
- FBX lezen/schrijven
- Collada lezen/schrijven
- 3D-scènes converteren
- Gegevens exporteren in glTF
- behandeling van componenten
- omgaan met texturen
three.js ondersteunt de populaire 3D-bestandsindelingen die hieronder worden vermeld.
Platformonafhankelijkheid
three.js kan worden uitgevoerd op elke moderne JavaScript-bundelaar, de meest populaire keuze is webpack.
- JavaScript
Aan de slag met three.js
De eenvoudigste manier om three.js te installeren is door npm te gebruiken. Gebruik de volgende opdracht voor een vlotte installatie.
Installeer drie.js via NPM
npm install --save three Scène maken met JavaScript
De open source-bibliotheek three.js heeft ondersteuning geboden voor het maken van een 3D-scène voor het draaien van een kubus in hun eigen JavaScript-toepassing. Om iets met three.js weer te geven, hebben we een scène, camera en renderer nodig. U kunt verschillende camera's en hun attributen gebruiken om de scène te voltooien. Vervolgens kunt u een rendererinstantie gebruiken en de grootte instellen waarop we willen dat deze onze app rendert. U kunt de lagere of hogere resolutie behouden. Ten slotte voegt u het element renderer (<canvas>) toe aan uw HTML-document. U kunt eenvoudig een kubus maken door BoxGeometry te gebruiken en het materiaal te gebruiken om deze in te kleuren. Daarna heb je een Mesh nodig die in de scène kan worden ingevoegd en naar behoefte kan worden verplaatst.
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 gaas that can be inserted into the scene and moved according to your need.
3D-modellen laden via JavaScript
Met de open source three.js-bibliotheek kunnen softwareprogrammeurs 3D-modellen in hun eigen applicatie laden met slechts een paar regels JavaScript-code. 3D-modellen zijn beschikbaar in honderden bestandsformaten. Elk model wordt geleverd met verschillende doeleinden, diverse functies en verschillende complexiteit. Eerst moet je een lader hebben en daarna kun je de scène laden.
Lijnen tekenen in een diagram
De open source-bibliotheek three.js heeft ondersteuning geboden voor het tekenen van lijnen of cirkels in hun eigen JavaScript-toepassing. Om te beginnen moeten we de renderer, scène en camera instellen. Daarna moet u het materiaal definiëren en kunt u LineBasicMaterial of LineDashedMaterial gebruiken. Na het materiaal hebben we geometrie nodig met enkele hoekpunten. Tussen elk opeenvolgend paar hoekpunten worden lijnen getrokken.
