Show HN: 3D-Framework für das Web auf Basis von Svelte und Three.js

 (threlte.xyz)
4 Punkte von GN⁺ 2024-04-30 | 1 Kommentare | Auf WhatsApp teilen
  • Threlte ist ein Open-Source-Framework, das Sveltes reaktives Komponentenmodell auf Three.js aufsetzt, um schnell interaktive 3D-Apps im Web zu erstellen
  • Mit deklarativen Komponenten wie <T.Mesh> werden Three.js-Objekte aufgebaut; über den Svelte-Lifecycle werden Event-Subscriptions und Zustandsänderungen verarbeitet
  • Als Basisausstattung werden die Rapier-Physics-Engine, das Animationstool Theatre.js, @threlte/gltf und @threlte/extras mitgeliefert, was den initialen Aufbau von 3D-Apps reduziert
  • Verhalten, das mit den <T>-Komponenten allein nicht ausreicht, lässt sich über typsichere Plugins um eigene Props und Events erweitern
  • Für Entwickler im Svelte-Ökosystem, die eine deklarative THREE-Library und Werkzeuge zum Erstellen von WebGL-Apps suchen, gelten Dokumentation und Nutzbarkeit als Stärken

Three.js-Szenen im Svelte-Stil aufbauen

  • Threlte ist ein 3D-Framework für das Web, das auf Svelte und Three.js basiert
  • Der Fokus liegt darauf, interaktive 3D-Apps schnell mit deklarativen, reaktiven Komponenten zu erstellen
  • Über den Lifecycle von Svelte-Komponenten lassen sich folgende Aufgaben erledigen
    • Event-Subscriptions
    • Verarbeitung von Zustandsänderungen
    • Verknüpfung komponentenbasierter Verhaltensweisen
  • Der Beispielcode platziert Geometrie und Material innerhalb von <T.Mesh> und setzt Props und Events wie scale, position.x und onclick direkt
  • Wie man die erste Szene erstellt, ist unter Make Your First Scene zu sehen

Mitgelieferte Tools und Erweiterungsmodell

  • Threlte positioniert sich als „batteries included“ und liefert Werkzeuge mit, die für die Erstellung von 3D-Apps benötigt werden
    • Rapier: Physics-Engine
    • Theatre.js: Animationsbibliothek mit professionellem Motion-Design-Toolset
    • @threlte/gltf: Tool zum Umwandeln von GLTF-Dateien in Threlte-Komponenten
    • @threlte/extras: Sammlung von Komponenten und Utilities für den Einstieg
  • Das Rapier-Beispiel kombiniert RigidBody, AutoColliders und <T.Mesh>, um einen kugelförmigen Collider und ein Mesh aufzubauen
  • Das Beispiel für @threlte/extras lädt mit den Komponenten Float und GLTF das Modell /models/flower.glb und legt Schatten, Position und Skalierung fest
  • Die Nutzung von @threlte/extras ist in der Documentation beschrieben
  • Plugins sind ein Erweiterungsmechanismus, um <T> typsicher eigene Props und eigene Events hinzuzufügen
    • Das Beispiel-Plugin registriert mit injectPlugin die Prop lookAt und ruft innerhalb von $effect args.ref.lookAt(args.props.lookAt) auf
    • Fortgeschrittene Nutzung ist in der Plugins-Dokumentation zusammengefasst
  • Außerdem werden Einstiegsdokumentation und Community-Links bereitgestellt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-04-30
Hacker-News-Meinungen
  • Ich bin der Autor von Threlte. Danke fürs Posten; wenn ihr wissen wollt, woran ich gerade arbeite, könnt ihr euch das Video meines gerade gehaltenen Vortrags auf dem Svelte Summit Spring ansehen: https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
    Im Kern arbeite ich an zwei Dingen. Das eine ist Svelte-5-Support. Weil Threlte stark in die Interna von Komponenten eingegriffen hat, etwa um Event-Handling effizienter zu machen oder Svelte-Transitions nicht auf DOM-Elemente, sondern auf Komponenten anzuwenden, ist das etwas mehr Arbeit als bei einer normalen Svelte-Bibliothek. Vieles davon ist in Svelte 5 eingebaut worden, und anderes wie Transitions müssen wir vorerst zurückstellen.
    Das andere ist Threlte Studio. Ich bin mir noch nicht sicher, wie man es am besten beschreibt, aber man kann es wohl als Editor bezeichnen, mit dem sich Code visuell bearbeiten lässt. Es ist erweiterbar, sodass man es an den eigenen Workflow anpassen kann, und ich bin gespannt, wie weit man damit gehen kann. Wer interessiert ist, kann uns auf Discord http://chat.threlte.xyz oder auf X https://twitter.com/threlte folgen.
    • Ich frage mich, wie Threlte im Vergleich zu React-Three-Fiber bei Funktionsgleichheit und Performance abschneidet.
    • Ich habe zufällig gestern das Svelte-Tutorial abgeschlossen und dann recherchiert, ob man Three.js in Svelte nutzen kann.
      Svelte fühlt sich wirklich intuitiv an, daher lag der Gedanke nahe, dass sich damit auch 3D-Umgebungen effizient verwalten lassen. Deshalb habe ich nach „Svelte + three.js“ gesucht.
      Da ich bisher PlayCanvas und Babylon.js genutzt habe, bin ich sehr gespannt auf die Entwicklung von Threlte Studio. An DREI gefällt mir, dass es alles wie ein Verzeichnis auffächert, aber dabei musste ich an vertraute „Studio-Tools“ denken. Mich würde der voraussichtliche Zeitplan für Threlte Studio interessieren.
  • Ich habe react-three-fiber und react-three-drei verwendet; man kann es als React-Version dieses Projekts betrachten. Die Beispiele sind überwältigend und großartig: https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
    Besonders mag ich das Beispiel mit der Bildergalerie. Ich habe es so angepasst, dass man beim Klicken auf ein Bild in einen anderen Raum, also in eine andere Galerie, gelangt.
    https://github.com/pmndrs/drei ist eine Sammlung von Beispielen und Helfern.
    Am beeindruckendsten fand ich ein Beispiel mit GLTF-Modellen, Video-Texturen auf Text und Reflexionen; die Standalone-Version gibt es unter https://bfplr.csb.app/.
    Noch beeindruckender ist die Sandbox, die zeigt, dass dafür gar nicht so viel Code nötig ist: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
    Eine Schicht über three.js zu legen erfordert viel Arbeit und hat mir auch einiges Kopfzerbrechen bereitet, aber das Potenzial ist trotzdem groß. Die Nutzung von three.js hat meine Sicht auf Website-Entwicklung völlig verändert, und wer Svelte nutzt, sollte sich das unbedingt ansehen.
    • Mich würde konkret interessieren, wie sich deine Sicht auf Website-Entwicklung durch „die Nutzung von three.js hat meine Sicht auf Website-Entwicklung völlig verändert“ geändert hat.
    • Wirklich cool. Es hat definitiv Yugop-Vibes, und man sieht, dass solche Tools einen völlig neuen Stil für Online-Medien schaffen könnten. Das Potenzial ist klar erkennbar.
  • Beim Stöbern habe ich eine Demo-App gefunden, die Threlte v6 zeigt: https://github.com/grischaerbe/threlter, https://threltemania.xyz/
    Das Technical Outline, insbesondere die vereinfachte Erklärung zur Autophysik, ist ziemlich aufschlussreich. Im Kern ist es ein Trackmania-Klon samt Track-Editor und wirkt wie ein Beispiel, das die Vorteile von Svelte/Threlte maximal ausnutzt.
    • Wenn es „die Vorteile von Svelte/Threlte maximal ausnutzt“, was sind diese Vorteile deiner Meinung nach?
  • Sieht interessant aus. Wenn man allerdings deklaratives 3D und Komponenten ohne Svelte oder React möchte, gibt es auch A-Frame oder X3D.
    Ich frage mich, ob die Leute wirklich deklaratives 3D wollen. X3D/VRML gibt es seit über 25 Jahren und A-Frame seit 8 Jahren, aber keines von beiden wurde besonders populär; auch mehrere andere Formate sind gekommen und wieder verschwunden. Three.js und imperatives/prozedurales 3D laufen dagegen insgesamt gut, und ich frage mich, warum das so ist.
    • Deklaratives 3D in Form von Framework-Integrationen für Three.js ist sehr beliebt und dürfte inzwischen die meistgenutzte professionelle Konfiguration auf Three.js-Websites sein. Das populärste davon ist react-three-fiber. Der deklarative Charakter solcher Frameworks erleichtert Wiederverwendung, und darauf baut das Ökosystem auf.
    • Frameworks wie react-three-fibre sind beliebt, weil Anfänger bestehende Komponenten zusammenstecken können, ohne viel JavaScript zu kennen. Man sieht häufig, wie Influencer in diesem Bereich Dinge sagen wie: „Diesen Konfigurator mit nur 6 Zeilen Code bauen!“ Was solche Tools populär macht, ist nicht der deklarative Charakter des Codes, sondern die schnelle Erstellung und die scheinbar einfache Nutzung.
  • Die Kombination Threlte/SvelteKit/Tauri ist toll. Ich habe vor Kurzem Threlte ausprobiert und so etwas gebaut: https://crusaders-ashy.vercel.app/
    Es ist nicht besonders gut optimiert, und alle Modelle sind kostenlose Modelle von Sketchfab. Da es eine 3D-Spielumgebung ist, hilft ein aktueller PC.
  • Ich mag sowohl Svelte als auch Threlte. Ich habe ein 3D-Schachbrett in einer Parkumgebung gebaut und sogar lichess angebunden; alles war erstaunlich einfach.
    Ich denke, viele UIs könnten von 3D-Nutzung profitieren.
    • Ich würde sehr gern sehen, wie das aussieht. Auch ein einfaches Beispiel mit diesen Bibliotheken wäre gut.
  • Tolles Projekt. Wenn man einen eher grundlegenden Ansatz bevorzugt, ist A-Frame ebenfalls eine gute Option: https://aframe.io/
  • Die Syntax ist wirklich schön. Sie beeindruckt mich ähnlich wie damals, als ich mit react-three-fiber Three.js in JSX zum ersten Mal gesehen habe. Falls ich irgendwann Svelte + Three nutze, ist es gut zu wissen, dass es diese Option gibt.
  • Beeindruckend, wie flüssig das Scrollen ist. Webseiten mit scrollbasierten Animationen fühlen sich für mich oft ruckelig und hakelig an; mir war nicht klar, dass der Effekt so gut sein kann, wenn er tatsächlich mit der Bildwiederholrate des Monitors läuft.
  • Ich nutze es seit etwa zwei Jahren. Jedes Mal, wenn ich in die Doku schaue, gibt es ein neues Extra, und legrisch ist ebenfalls großartig. Der Discord ist auch ziemlich aktiv. Eine erstaunliche Tool-Sammlung, und ich bin gespannt, wie weit sie noch gehen wird.