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.

individuelles Angebot

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.

Download PDF    Seite ausdrucken