Wie Sie 3D-Modelle in Three.js laden.

3D-Modelle sind in Hunderten von Dateiformaten verfügbar, die jeweils unterschiedliche Zwecke, verschiedene Funktionen und unterschiedliche Komplexität aufweisen. Obwohl Three.js viele Loader 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-Ergebnisse ineffizient oder werden derzeit einfach nicht vollständig unterstützt.

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

Bevor wir anfangen.

Wenn Sie zum ersten Mal einen lokalen Server betreiben, beginnen Sie damit, wie Sie die Dinge zuerst lokal ausführen können. Viele häufige Fehler beim Betrachten von 3D-Modellen können durch das korrekte Bereitstellen von Dateien vermieden werden.

Empfohlender Workflow.

Wenn möglich, empfehlen wir die Verwendung von glTF (GL Transmission Format). Sowohl die .GLB als auch die .GLTF-Version des Formats werden gut unterstützt. Da glTF auf die Bereitstellung von Runtime-Assets ausgerichtet ist, ist es kompakt zu übertragen und schnell zu laden. Zu den Funktionen gehören Meshes, Materialien, Texturen, Skins, Skelette, Morph-Targets, Animationen, Lichter und Kameras.

Öffentlich zugängliche glTF-Dateien sind auf Websites wie Sketchfab verfügbar oder verschiedene Tools beinhalten den glTF-Export:

• glTF-Blender-Exporter der Khronos-Gruppe
• COLLADA2GLTF von der Khronos-Gruppe
• FBX2GLTF von Facebook
• OBJ2GLTF von Analytical Graphics Inc.
• Substance Painter mit Allegorithmic
• Modo von Foundry
• Toolbag von Marmoset
• etc.

Wenn ihre bevorzugten Tools glTF nicht unterstützen, sollten Sie den glTF-Export von den Autoren anfordern oder im glTF-Roadmap-Thread posten.

Wenn glTF keine Option ist, sind auch gängige Formate wie FBX, OBJ oder COLLADA verfügbar und werden regelmäßig gepflegt.

Laden.

Nur wenige Ladeprogramme (z.B. ObjectLoader) sind standardmäßig mit Three.js enthalten – andere sollten individuell zu ihrer Seite hinzugefügt werden. Abhängig von ihren Vorlieben und ihrem Komfort mit Build-Tools wählen Sie eine der folgenden Optionen:

Derzeit sind Three.js-Beispiele nicht als ES-Module verfügbar (Import aus..).

Nachdem Sie einen Loader importiert haben, können Sie ihrer Szene ein Modell hinzufügen. Die Syntax variiert je nach Loader – wenn Sie ein anderes Format verwenden, lesen Sie die Beispiele und die Dokumentation zu diesem Loader. Für glTF wäre die grundlegende Verwendung:

Fehlersuche.

Sie haben schon Stunden damit verbracht, ein handwerkliches Meisterwerk zu modellieren, laden es auf ihrer Webseite und es ist verzerrt, verfärbt oder fehlt ganz. Beginnen Sie mit diesen Schritten zur Fehlerbehebung:

1. Überprüfen Sie die JavaScript-Konsole auf Fehler und stellen Sie sicher, dass Sie beim Aufruf von .load() einen onError Callback verwendet haben, um das Ergebnis zu protokollieren.
2. Betrachten Sie das Modell in einer anderen Anwendung. Für glTF sind Drag-und-Drop-Viewer für Three.js und Babylon.js verfügbar. Wenn das Modell in einer oder mehreren Anwendungen korrekt angezeigt wird, melden Sie den Bug für Three.js. Wenn das Modell in keiner Anwendung gezeigt werden kann, empfehlen wir dringend, einen Fehler bei der Anwendung zu melden, mit der das Modell erstellt wurde.

1. Versuchen Sie, das Modell um den Faktor 100 zu vergrößern oder zu verkleinern. Viele Modelle sind unterschiedlich skaliert und große Modelle erscheinen möglicherweise nicht, wenn sich die Kamera im Modell befindet.
2. Suchen Sie nach fehlgeschlagenen Texturanforderungen in der Registerkarte Netzwerk, wie z.B. C:\\Path/To/Model/texture.jpg. Verwenden Sie stattdessen Pfade relativ zu ihrem Modell, wie z.B. images/texture.jpg – dies kann eine Bearbeitung der Modell-Datei in einem Texteditor erfordern.

Sich um Hilfe bemühen.

Wenn Sie den oben genannten Prozess zur Fehlerbehebung durchlaufen haben und ihr Modell immer noch nicht funktioniert, wird der richtige Ansatz bei der Bitte um Hilfe Sie schneller zu einer Lösung führen. Stellen Sie eine Frage in unserem Forum und fügen Sie wenn möglich ihr Modell in allen verfügbaren Formaten hinzu. Fügen Sie genügend Informationen bei, damit jemand anderes das Problem schnell reproduzieren kann – idealerweise eine Live-Demo.

Vielen Dank für ihren Besuch.