WordPress Tutorial: Plugin-Entwicklung THREE.GLTFLoader

Allgemein Schlagwörter: , , 0 Kommentare

In unser Artikelserie zeigen wir euch die Plugin-Entwicklung für WordPress. In dieser Artikelserie bekommst du einen Einblick, wie wir arbeiten.

Artikelserie zum Thema Plugin-Entwicklung für WordPress
Schritt 1 = Planung und Vorbereitung
Schritt 2 = WordPress Plugin Boilerplate Generator
Schritt 3 = Cube-Mapping
Schritt 4 = THREE.GLTFLoader
Schritt 5 = Prototypenentwurf

Was ist eigentlich ein Plugin?

Plugins fügen zusätzliche Funktionen zu einer WordPress-Installation hinzu. Im Gegensatz zu Themes, die das Design einer Website bestimmen und von denen man immer nur eines aktivieren kann, kann man so viele Plugins installieren, wie man möchte.

In unser Artikelserie zeigen wir euch, wie wir mit unserem WordPress Plugin – Objekte ohne weitere Dienstleister in unserem Blog darstellen. Zur Zeit binden wir noch mit HTML iframe 33D – Objekte ein.

Beispiel:

Rendern von 3D-Modellen

Navigationshilfe

3D-Modell drehen: Drücken der linken Maustaste und bewegen der Maus
Vergrößern/Verkleinern: Mausrad drehen
Verschieben: Drücken der rechten Maustaste und bewegen der Maus

Mit unserem WordPress Plugin möchten wir ohne HTML iframe 3D – Objekte in unserem Blog darstellen. Du kannst uns in dieser Artikelserie zu sehen, wie wir arbeiten. Betrachten wir den Quellcode in einem neuen Browserfenster an.
https://blog.r23.de/r23webvr/three.js-r90/examples/helm.txt

Der Hintergrund von der 3D Szene ist ein kubisches Environment Mapping. Dies haben wir euch in unserem gestrigen r23Artikel beschrieben. In diesem Artikel möchten wir auf das 3D Model im glTF-Format eingehen und dich bei deinen zukünftigen 3D-Posts unterstützen.

GLTFLoader

Ein Loader zum Laden der glTF 2.0 Ressource.

glTF (GL Transmission Format) ist eine offene Formatspezifikation für die effiziente Bereitstellung und das Laden von 3D-Inhalten. Assets können entweder im JSON-Format (.gltf) oder im Binärformat (.glb) bereitgestellt werden. Externe Dateien speichern Texturen (.jpg,.png,…) und zusätzliche Binärdaten (.bin). Ein glTF-Asset kann eine oder mehrere Szenen liefern, einschließlich Meshes, Materialien, Texturen, Skins, Skelette, Morph-Ziele, Animationen, Lichter und/oder Kameras.
Erweiterungen
GLTFLoader unterstützt die folgenden glTF-Erweiterungen:

KHR_Werkstoffe_pbrSpecularGlanzgrad
KHR_lights (experimentell)

Beispiel

.load ( url, onLoad, onProgress, onError )

url – Ein String, der den Pfad/URL der.gltf- oder.glb-Datei enthält.

onLoad – Eine Funktion, die nach erfolgreichem Abschluss des Ladevorgangs aufgerufen wird. Die Funktion empfängt die geladene JSON-Antwort, die von parse zurückgegeben wird.

onProgress – (optional) Eine Funktion, die während des Ladevorgangs aufgerufen wird. Das Argument wird die XMLHttpRequest-Instanz sein, die .total und .loaded Bytes enthält.

onError – (optional) Eine Funktion, die aufgerufen wird, wenn beim Laden ein Fehler auftritt. Die Funktion erhält den Fehler als Argument.

Beginnen Sie mit dem Laden von der URL und rufen Sie die Callback-Funktion mit dem geparsten Response-Inhalt auf.

In einem früheren r23Artikel haben wir darüber berichtet, dass Facebook seit wenigen Tagen den Post von 3D-Inhalten im glTF 2.0-Dateiformat über den Newsfeed ermöglicht.

Gepostet von Ralf Dreiundzwanzig am Montag, 26. Februar 2018

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Schreibe einen Kommentar

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

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.

Chatten Sie jetzt mit uns