three.js
JavaScript-Bibliothek für 3D-Dateiformate
Open-Source-JavaScript-API zum Lesen, Schreiben und Rendern von WebGL-, FBX-, Collada- und OBJ-Dateiformaten über die kostenlose 3D-Bibliothek.
three.js ist eine benutzerfreundliche, reine JavaScript-3D-Open-Source-Bibliothek, die Softwareentwicklern die Möglichkeit gibt, WebGL-Dateien zu rendern. Die Three.js-Bibliothek bietet Ladeprogramme für zahlreiche Dateiformate wie FBX, Collada sowie OBJ, aber das empfohlene Format zum Importieren und Exportieren von Daten ist glTF. Das Tolle am glTF-Dateiformat ist, dass es sehr kompakt ist und einfach übertragen werden kann und auch sehr schnell geladen wird.
Die Bibliothek unterstützt mehrere wichtige Funktionen im Zusammenhang mit 3D-Modellen, z. B. Erstellen einer Szene, Laden von 3D-Modellen, Erstellen von Text, Zeichnen von Linien, Einstellen einer Kamera, Erstellen eines geometrischen Würfels, Hinzufügen eines Würfels zur Szene, Rendern der Szene, Hinzufügen eines Ansichtsfensters zu einem Element, und viele mehr. In der Three.js-Bibliothek werden verschiedene Kameras verwendet.
Auf einen Blick
Eine Übersicht über die Three.js-Funktionen.
- Erstellen Sie 3D-Szenen
- Laden von 3D-Modellen
- Linien zeichnen
- FBX lesen/schreiben
- Lesen/Schreiben von Collada
- 3D-Szenen konvertieren
- Daten in glTF exportieren
- Bauteilhandhabung
- Texturen behandeln
three.js unterstützt die unten aufgeführten gängigen 3D-Dateiformate.
Plattformunabhängigkeit
three.js kann auf jedem modernen JavaScript-Bundler ausgeführt werden, die beliebteste Wahl ist webpack.
- JavaScript
Erste Schritte mit three.js
Der einfachste Weg, three.js zu installieren, ist die Verwendung von npm. Bitte verwenden Sie den folgenden Befehl für eine reibungslose Installation.
Installieren Sie three.js über NPM
npm install --save three Szene mit JavaScript erstellen
Die Open-Source-Bibliothek three.js hat Unterstützung für die Erstellung einer 3D-Szene zum Drehen eines Würfels in ihrer eigenen JavaScript-Anwendung bereitgestellt. Um irgendetwas mit three.js anzuzeigen, benötigen wir eine Szene, eine Kamera und einen Renderer. Sie können verschiedene Kameras und deren Attribute verwenden, um die Szene zu vervollständigen. Als Nächstes können Sie eine Rendererinstanz verwenden und die Größe festlegen, mit der unsere App gerendert werden soll. Sie können die niedrigere oder höhere Auflösung beibehalten. Zuletzt fügen Sie Ihrem HTML-Dokument das Element renderer (<canvas>) hinzu. Sie können ganz einfach einen Würfel erstellen, indem Sie BoxGeometry verwenden und ihn mit dem Material einfärben. Danach benötigen Sie ein Mesh, das in die Szene eingefügt und nach Bedarf verschoben werden kann.
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 Gittergewebe that can be inserted into the scene and moved according to your need.
Laden von 3D-Modellen über JavaScript
Die Open-Source-Bibliothek three.js ermöglicht es Softwareprogrammierern, 3D-Modelle mit nur wenigen Zeilen JavaScript-Code in ihre eigene Anwendung zu laden. 3D-Modelle sind in Hunderten von Dateiformaten verfügbar. Jedes Modell hat unterschiedliche Zwecke, verschiedene Funktionen und unterschiedliche Komplexität. Zuerst benötigen Sie einen Loader und danach können Sie die Szene laden.
Zeichnen Sie Linien in einem Diagramm
Die Open-Source-Bibliothek three.js hat Unterstützung für das Zeichnen von Linien oder Kreisen in ihrer eigenen JavaScript-Anwendung bereitgestellt. Zunächst müssen wir den Renderer, die Szene und die Kamera einrichten. Danach müssen Sie das Material definieren und können LineBasicMaterial oder LineDashedMaterial verwenden. Nach dem Material benötigen wir Geometrie mit einigen Scheitelpunkten. Linien werden zwischen jedem aufeinanderfolgenden Scheitelpunktpaar gezeichnet.
