Basic Tutorial zur Extension-Erstellung? (Three.js)

Thomas Hilburger

Hallo allerseits,

nach einiger Abwesenheit hier und der Community, komme ich gleich mit einer konkreten Frage wieder:
Ich habe mit in der letzten Zeit viel mit Three.js (3D im Browser https://threejs.org) und notwendigerweise mit der Auffrischung meiner JS-Kenntnisse beschäftigt. Meine Frau produziert sehr viel 3D und ich habe 2-3 Anwendungen, bei denen solche Dinge ins Netz bringen will/muss.

Lokal und auf einem dedizierten JS-Server ist es sehr straight forward.
Nun möchte ich aber die 3D-Objekte, vergleichbar mit Bildern neben normalem Content wie bei einem Bild-Text-Contentelement redaktionell nutzen können, weil es sonst sehr intransparent, unflexibel und fehleranfällig wird.

Da man hier recht viel mit dem Nachladen von (größtenteils wiedergenutzen) Modulen und korrekten Pfaden zu tun hat, erscheint mir eine Extension dafür recht sinnvoll.
Und hier beginnt mein Problem als Integrator: Das Erstellen von TYPO3-Extensions. 😅

Habt Ihr Tipps für Tutorials in Richtung dieser Art von Extensions?
Ich wollte mich damit nach und nach vertraut machen.

Danke Euch und viele Grüße aus dem Norden,
Thomas

Eric Harrer

Kannst du mal ein konkretes Beispiel für 3D Web Content (unabhängig von TYPO3) geben, evtl. Als komprimiertes Archiv mit im Browser ausführbarem Inhalt.

Das wäre dann schonmal eine gute Grundlage um sich Gedanken darüber zu machen, wie sich dein Anwendungsfall am besten integrieren lässt.

Vielleicht hast du ja Glück und es stellt sich heraus, dass es bereits mit Content Blocks bzw. Custom Content Elements umsetzbar ist.

Thomas Hilburger

Eric Harrer
Ich suche nachher mal etwas und ein paar Scribbles raus. :)

Thomas Hilburger

Hi Eric Harrer
Ich habe hier ein Archiv in dem Du u.a. den dist-Folder zum einfachen ausführen findest:
https://cloud.tnt-digitalagentur.de/index.php/s/tRj5yAj9yYg5FbC
Ansonsten kannst Du das auch mit npm und vite laufen lassen.
Bei Rückfragen melde Dich gern. 🙂

Eric Harrer

Ich habe den Inhalt des dist-Verzeichnisses mal auf meinen Server gespielt:
https://content.eric-harrer.de/forum.t3academy.de/419/

Folgende Datei-Struktur wird verwendet:

.
├── assets
│   ├── index-944faba3.css
│   ├── index-eb011042.js
│   └── index-eb011042.js.map
├── env-maps
│   └── adams_place_bridge_1k.hdr
├── examples
│   └── jsm
│       └── libs
│           └── basis
│               ├── basis_transcoder.js
│               └── basis_transcoder.wasm
├── index.html
├── objects
│   ├── ddd-15
│   │   └── waverex_card_ddd15-11_blend_webp95.glb
│   └── ddd-maxxed
│       └── waverex_card_ddd-maxxed-opt_ktx_1k.glb
├── scribble.png
└── www-images
    ├── csm_Synthestix_0221_Highres_eciRGB_EBV.jpg
    ├── csm_Synthestix_0221_Highres_eciRGB_EBV_a55bdec2fd.jpg
    ├── csm_banner_bg_biker_001_no-content.jpg
    └── csm_banner_bg_biker_001_no-content_c743535b5f.jpg

Damit die 3D Objekte geladen werden können, musste ich den im JavaScript verwendeten Datei-Pfad https://staging.waverex.tnt-digitalagentur.de/fileadmin/3d/waverex-cards/ durch den relativen Pfad objects/ ersetzen.

Zur Sache selbst kann ich mich aktuell noch nicht äußern. Dafür müsste ich mir noch etwas Zeit nehmen. Immerhin haben nun auch die anderen hier im Forum einen Beispiel-Link, den sie direkt im Browser öffnen können, um auf deine Frage eingehen zu können.

Thomas Hilburger

Eric Harrer
Danke fürs Mitdenken, Eric. Tipps von einem erfahrenen Extension-Mann sind sehr hilfreich :)
Du konntest dann mit den relativen Pfaden auch alle Module sauber nachladen ja?

Eric Harrer

Thomas Hilburger Die Netzwerkanalyse der Browser Entwicklerleiste und die Konsole zeigen zumindest keine Probleme. Deshalb gehe ich mal davon aus, dass alles sauber geladen wird.

Zu deinem Fall: Im Grunde ist es ja so, dass es sich verhalten soll wie ganz normale Text-Bild- [textpic] oder Text-Medien-Elemente [textmedia]. So wie bei einem Text-Medien-Element ein Video gemeinsam mit dem Text in allen Ausrichtungen ausgegeben werden kann, so benötigst du eine Ausgabe eines 3D Web Viewers im Kontext eines entsprechenden Content-Elements, man könnte es Text-3D-Element [text3d] nennen.

In deinem Beispiel wäre es mal interessant welche Dateien das absolute Minimum wären, um das 3D-Element im Browser ausgeben zu lassen. Vermutlich braucht es da nurnoch die HTML-Datei index.html, das JavaScript index-eb011042.js und die zu ladende 3D-Datei im *.glb-Format. Im Endeffekt muss man dann denjenigen JavaScript-Part, der den Bezug zur 3D-Datei enthält dynamisch gestalten, um beliebige 3D Elemente im 3D Web Viewer anzeigen zu können. Dies müsste ja mit Fluid-Mitteln im Kontext eines Content Blocks bzw. Custom Content Elements machbar sein.

Thomas Hilburger

Eric Harrer
Ich habe in dem Zip die gebuildete Version. Das JS wird mit vite gebaut.
Das Minimum-Set hängt ein wenig von der Art der zu ladenden 3D-Datei(en) ab.

Dies ist der Kopf der script.js, welche die Grundlage für die gebuildete index-eb011042.jsist:


// Absolute Minimum: 
import * as THREE from 'three' // three.js minimum
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // Cam control
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' // Loader for gltf files incl. glb

// Optional, depending on model (gltf/glb): 
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 3D mesh decompression, loads decoder via dracoLoader.setDecoderPath('draco/')
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js' // Texture decompression. loads decoder via pathKtxTranscoderLocal:'examples/jsm/libs/basis/'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js' // HDRI processing
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js' // For encoded optimized meshes

// Optional, very useful for loaders
import { gsap } from 'gsap' // animations
import GUI from 'lil-gui' // UI elements, often used during dev cycle
import { CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js' // dynamic none-3D text

Ich bin in dem Bereich noch nicht erfahren genug, um einschätzen zu können, ob man besser alles JS buildet oder nicht.

Hier noch ein Versuch, die Teile des Ganzen darzustellen:

pno

@Thomas Hilburger für ein anstehendes Projekt habe ich tatsächlich etwas sehr ähnliches vor. Der Kunde möchte auf der Website 3D-Modelle mit Annotationen darstellen um seine Produkte zu erklären. Ich hab bisher nur einen PoC außerhalb von TYPO3 gebaut (https://static.pno.dev/model/). Mein Plan war einen content_block zu bauen in dem die glb Datei hochgeladen wird (und ggf. die Annotationen gepflegt werden können). Hast du für dich inzwischen einen guten Weg gefunden? Vlt. können wir ja etwas von unseren gegenseitigen Erfahrungen profitieren. Ich hab viel Erfahrung mit JS und TYPO3, aber bin ein absoluter Noob was 3D angeht 😅

Thomas Hilburger

pno
Hey, coole Sache!
Das klingt gut - lass uns da gern zusammentun. Ich dachte auch an Contentblock, habe damit bisher selbst aber noch nichts gemacht.
Dafür ist meine Frau bei uns die 3Dlerin und ich kümmere mich seit Kurzem um die Threejs-Seite und will das in meine Integratortätigkeit aufnehmen.

Ich habe lokal ein paar Sachen am laufen und erstelle gerade ein HTML/JS-Musterprojekt.
Zunächst wollte ich das Ganze per Vite builden, aber ich meine, dass dadurch Redundanzen entstehen, deswegen verfolge ich gerade, wie Eric auch meinte den Ansatz mit dem Laden zentralen JS-Modulen plus etwaigen Ergänzungen (KTX-Loader, Draco usw.).
Sag mal Bescheid, wie es zeitlich bei Dir aussieht. Ich bin momentan fast täglich am "Spielen"

pno

Saucool! Ich melde ich im Laufe der nächsten Woche mal bei dir. Bin gerade noch damit beschäftigt ein anderes Projekt zum Abschluss zu bringen.

Thomas Hilburger

Perfekt! Gern sonst Mail, Discord o.ä. und dann machen wir mal nen Call. :)

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS