3D Modelle im Web mit three.js

Open Source Schlagwörter: , , , , 0 Kommentare
Voiced by Amazon Polly

-Modelle sind in Hunderten von Dateiformaten verfügbar, die jeweils unterschiedliche Zwecke, verschiedene Funktionen und unterschiedliche Komplexität aufweisen. Obwohl viele Lader zur Verfügung stellt, spart die Wahl des richtigen Formats und Workflows später Zeit und Frustration. Einige Formate sind schwer zu verarbeiten, für Echtzeit-Erlebnisse ineffizient oder werden derzeit einfach nicht vollständig unterstützt.

Dieser Leitfaden enthält einen empfohlenen Workflow und Vorschläge, was Sie versuchen sollten, wenn die Dinge nicht wie erwartet laufen.

Empfohlener Arbeitsablauf

Wenn möglich, empfehlen wir die Verwendung von (GL Transmission Format). Sowohl die .GLB- als auch die .-Version des Formats werden gut unterstützt. Mit 2.0 wurde ein laufzeitneutrales, offenes Standardformat für die Echtzeit-Abgabe von von 3D-Inhalten im Internet veröffentlicht. Zu den Funktionen gehören Netze, Materialien, Texturen, Skins, Skelette, Morph-Ziele, Animationen, Lichter und Kameras.

Die folgenden Tools beinhalten den glTF-Export:

Für Blender 2.79 stellen wir eine Installations-Anleitung zur Verfügung. In Blender 2.80 steht der Import und Export von .GLB- als auch die .GLTF-Version zur Verfügung.

Wenn glTF keine Option ist, sind auch gängige Formate wie FBX, OBJ oder COLLADA verfügbar und werden regelmäßig gepflegt. Wir verwenden in unseren Beispielen das glTF (GL Transmission Format).

glTF (GL Transmission Format) ist eine offene Formatspezifikation für die effiziente Bereitstellung und das Laden von 3D-Inhalten. 3D Modelle können entweder im JSON (.gltf) oder im binären (.glb) Format bereitgestellt werden. Externe Dateien speichern Texturen (.jpg,.png) und zusätzliche binäre Daten (.bin). Ein glTF-Asset kann eine oder mehrere Szenen liefern, einschließlich Netze, Materialien, Texturen, Skins, Skelette, Morph-Ziele, Animationen, Lichter und Kameras.

3D Modell von mixamo.com

Laden

Code Beispiel

Nachdem Sie den Lader importiert haben, können Sie Ihrer Szene ein Modell hinzufügen.

Bevor wir aber den 3D Inhalt im glTF (GL Transmission Format) laden fügen wir Draco hinzu.

Auszug aus unserem obigen Beispiel

Draco ist eine Bibliothek zum Komprimieren und Dekomprimieren von geometrischen 3D-Netzen und Punktwolken. Ziel ist es, die Speicherung und Übertragung von 3D-Grafiken zu verbessern.

Draco wurde für die Effizienz und Geschwindigkeit der Kompression entwickelt und gebaut. Der Code unterstützt Komprimierungspunkte, Verbindungsinformationen, Texturkoordinaten, Farbinformationen, Normalen und alle anderen allgemeinen Attribute, die mit der Geometrie verbunden sind. Mit Draco können Anwendungen mit 3D-Grafik deutlich kleiner sein, ohne die Bildtreue zu beeinträchtigen. Für den Anwender bedeutet dies, dass Apps nun schneller heruntergeladen werden können, 3D-Grafiken im Browser schneller laden können und VR- und AR-Szenen nun mit einem Bruchteil der Bandbreite übertragen und schnell gerendert werden können.

Website: https://google.github.io/draco/
GitHub: https://github.com/google/draco

Wie können wir Ihnen helfen?

Sie wollen online richtig verkaufen? Wir unterstützen Sie bei der Umsetzung Ihres E-Commerce Projektes! Egal ob 360° Produktfotografie, 3D Scan Service, Charakterdesign, 3D Visualisierung oder Architekturvisualisierung – wir beraten Sie persönlich und unverbindlich.

Wünschen Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen, nutzen Sie einfach unser Anfrageformular.



Schreibe einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Durch das Anhaken der Checkbox erklären Sie sich mit der Speicherung und Verabeitung Ihrer Daten durch diese Webseite einverstanden. Um die Übersicht über Kommentare zu behalten und Missbrauch zu verhindern, speichert diese Webseite Name, E-Mail und Kommentar. Detaillierte Informationen finden Sie in der Datenschutzerklärung.

Aktuell