
Konverter von Wavefront OBJ nach JavaScript Object Notation
|
Heute möchte ich euch einen Konverter von 3D Objekten nach JavaScript vorstellen. Der Konverter erstellt aus einer Wavefront OBJ Datei eine JavaScript Object Notation Datei.
Was ist Wavefront OBJ?
OBJ (oder .obj) ist ein offenes Dateiformat zum Speichern von dreidimensionalen geometrischen Formen. Das von Wavefront Technologies entwickelte Format wird von vielen 3D-Grafikprogrammen unterstützt und ist daher geeignet für die programm- und plattformübergreifende Weitergabe von 3D-Modellen.
Das OBJ-Format speichert geometrische Eigenschaften eines Objekts oder gruppierter Objekte, d.h. Ecken, Textur-Koordinaten, Normalen, Flächen und Glättungen. Optische Materialeigenschaften (z.B. Spiegelung, Transparenz, Glanzlicht usw.) werden in einer separaten Materialdatei definiert, die auch Angaben zu Texturierungen enthalten kann. Die Materialdatei besitzt in der Regel die Dateiendung .mtl (von engl. material template library) und kann in der eigentlichen OBJ-Datei referenziert werden.
Was ist JavaScript Object Notation?
Die JavaScript Object Notation, kurz JSON [ˈdʒeɪsən], ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen. Jedes gültige JSON-Dokument soll ein gültiges JavaScript sein und per eval() interpretiert werden können. Aufgrund kleiner Abweichungen in der Menge der erlaubten Unicode-Zeichen ist es jedoch möglich, JSON-Objekte zu erzeugen, die von einem normkonformen JavaScript-Interpreter nicht akzeptiert werden.[1] Davon abgesehen ist JSON aber unabhängig von der Programmiersprache. Parser existieren in praktisch allen verbreiteten Sprachen.
Verwandeln Sie Ihren Commerce mit 3D-Visualisierung von R23
Ein Maskottchen / Charakter transportiert die Botschaft Ihrer Dienstleistungen und Produkte nach außen. Darüber hinaus kann ein Maskottchen / Charakter für einen Wiedererkennungswert sorgen.

Wir bieten Ihnen Maskottchen / Charakter Design für Ihre Marke, in 3D oder als Zeichnung. Ihre einzigartige Sympathiefigur.
Wie man diesen Konverter verwendet
python convert_obj_three.py -i teapot.obj -o teapot.js
python convert_obj_three.py -i infile.obj -o outfile.js [-m "morphfiles*.obj"] [-c "morphcolors*.obj"] [-a center|centerxz|top|bottom|none] [-s smooth|flat] [-t ascii|binary] [-d invert|normal] [-b] [-e]
Notizen: - flags -i infile.obj Eingabe OBJ-Datei -o outfile.js Ausgabe JS-Datei -m "morphfiles * .obj" morph OBJ-Dateien (können Platzhalter verwenden, eingeschlossen in Anführungszeichen mehrere Muster durch Leerzeichen getrennt) -c "morphcolors * .obj" morph Farben OBJ-Dateien (können Platzhalter verwenden, eingeschlossen in Anführungszeichen mehrere Muster getrennt durch Leerzeichen) -a center | centerxz | top | bottom | none Modellausrichtung -s smooth | flatsmooth= Exportscheitel-Normalen, flach = keine Normalen (im Loader berechnete Flächennormalen) -t ascii | binary ascii oder Binärformat (ascii hat mehr Funktionen, binäre nur unterstützt Scheitel, Gesichter, Normalen, UV-und Material) -b backen Materialfarben in Gesichtfarben -x 10.0 Maßstab und trunkate -f 2-Morph-Frame-Abtastschritt - standardmäßig: Verwenden Sie glatte Schattierung (wenn es Scheitel Normalen in der ursprünglichen Modell) Wird im ASCII-Format sein Keine Gesichtsfarben backen Keine Skala und trunkate Morph frame step = 1 (alle Dateien werden verarbeitet) - Binär-Konvertierung erstellt zwei Dateien: Outfile.js (Materialien) Outfile.bin (binäre Puffer)
Verwendung der generierten JS-Datei in Deinem HTML-Dokument
<script type="text/javascript" src="Three.js"></script> ... <script type="text/javascript"> ... // load ascii model var jsonLoader = new THREE.JSONLoader(); jsonLoader.load( "Model_ascii.js", createScene ); // load binary model var binLoader = new THREE.BinaryLoader(); binLoader.load( "Model_bin.js", createScene ); function createScene( geometry, materials ) { var mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) ); } ... </script>
Beispiel
Beispiel im Browser
https://blog.r23.de/3d/loader/index.php
Navigationshilfe
3D-Modell drehen: Drücken der linken Maustaste und bewegen der Maus
Vergrößern/Verkleinern: Mausrad drehen
Verschieben: die mittleren Maustaste gedrückt halten und die Maus bewegen
Wie erstellt man mit Blender richtige OBJ + MTL-Dateien?
0. Standardwürfel entfernen (DEL und ENTER drücken) 1. Importieren / erstellen Modell 2. Markiere alle Meshes (Select -> Select All by Type -> Mesh) 3. Export in OBJ (Datei -> Exportieren -> Wavefront .obj) - Ermögliche folgende Optionen im Exporteur Materialgruppen Drehen Sie X90 Modifikatoren anwenden Hochwertige Normale Bilder kopieren Nur Auswahl Objekte als OBJ-Objekte UVs Normalen Werkstoffe - leeren Ordner auswählen - geben Sie Ihren exportierten Dateinamen mit der Erweiterung "obj" an - Klicken Sie auf "Export OBJ" -Taste 4. Dein odell ist nun mit allen Dateien in diesem Ordner (OBJ, MTL, Anzahl der Bilder) - der Konverter geht davon aus, dass alle Dateien im selben Ordner bleiben, (OBJ / MTL-Dateien verwenden relative Pfade) - Für WebGL müssen Texturen 2 Potenzen aufweisen
Wie können wir Ihnen helfen?
Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Egal ob Produktfotografie, 3D Scan Service, 3D-Visualisierung oder fertige 3D Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.
Wünschen Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen, nutzen Sie einfach unser Anfrageformular.
Wir freuen uns über eine Mail an fehlerhinweis@r23.de!
Inhaltliches Feedback?
Gerne als Leser:innenkommentar unter dem Text.
2022 © All Rights Reserved. R23 AGB | Datenschutz | Cookie-Einstellungen | Impressum |
Kommentar
Möchten Sie mitdiskutieren?
Hinterlassen Sie einen Kommentar!