Seijaku: Interaktiver 3D-Rundgang durch ein Kyoto-Anwesen mit Three.js

RepositoryMengTo/seijakuDemo

Seijaku ist eine interaktive Web-Demo von Meng To, die einen nahtlosen, scrollbasierten Rundgang durch ein virtuelles traditionelles Kyoto-Haus bietet. Die Anwendung kombiniert prozedurale 3D-Architektur, Web Audio und interaktive Materialstudien ohne separaten Build-Schritt.

Das Wichtigste

  1. Nahtlose Scroll-Choreografie durch Garten, Teeraum und Innenhöfe samt freiem Inspektionsmodus per Orbit-Steuerung.
  2. Interaktive Features wie Raumwechsel über Grundrisse, Jahreszeitenwechsel und eine Klangkulisse mittels Web Audio.
  3. Einsatz von Three.js 0.176.0 und meshoptimizer 1.2.0 mit Instancing, prozeduralen Texturen und Post-Processing.
  4. Optimierte Ladezeit durch gestaffeltes Hochladen von Texturen, Vorwärmen von Shader-Pipelines und Lazy Loading von Modellen und Bildern.
  5. Vollständig statischer Aufbau ohne Build-Tools, Paketmanager oder Backend; HTML, CSS und Shader liegen in einer index.html.

Warum das relevant ist

Das Projekt demonstriert fortgeschrittene Techniken für 3D-Storytelling und architektonische Produktpräsentationen im Web. Es zeigt, wie komplexe WebGL-Szenen durch Pipeline-Optimierung und Lazy Loading flüssig auf Landingpages integriert werden können, ohne auf schwere Frameworks oder Build-Pipelines angewiesen zu sein.

Einordnung

Das Projekt Seijaku löst die technische Herausforderung, aufwändige 3D-Modelle und redaktionelle Inhalte performant und unterbrechungsfrei in einer Weboberfläche zu verschmelzen. Meng To nutzt dafür Three.js 0.176.0 und meshoptimizer 1.2.0, um Geometriedaten kompakt auszuliefern. Die Szene kombiniert prozedurale Konstruktionen zur Laufzeit mit komprimierten 3D-Assets für Steine oder Koi-Fische. Die Demo richtet sich vor allem an Frontend-Entwickler, Creative Coder und 3D-Designer, die nach praxisnahen Referenzen für 3D-Storytelling und WebGL-Performance suchen. Beim Reifegrad handelt es sich um ein exploratives Konzept und eine Design-Demo: Es gibt kein Backend (das Anfrageformular speichert keine Daten), der Code ist monolitisch in einer Datei organisiert, und das Repository besitzt keine explizite Lizenz.

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • X-Post:Meng To

    Open-Source-Landingpage Seijaku und acht Three.js-Skills für KI-Agenten

    Meng To hat den Quellcode für Seijaku veröffentlicht, eine interaktive 3D-Landingpage für einen virtuellen Rundgang durch ein japanisches Haus. Neben dem Projekt stellt er acht modulare Three.js-Skills bereit, die KI-Agenten bei der Erstellung komplexer 3D-Szenen unterstützen sollen.

    260Lesezeichen21.438Aufrufe

    KI & AI· Sammlung

  • Link:Meng To

    Seijaku: Präsentation eines traditionellen Wohnprojekts in Kyoto

    Die Website 'Seijaku' präsentiert ein exklusives Architekturprojekt in Kyoto, das traditionelle japanische Handwerkskunst mit minimalistischer Raumgestaltung verbindet. Das Objekt umfasst 310 m² Wohnfläche, 1.200 m² Gartenfläche und soll 2027 fertiggestellt werden.

    UI/UX-Design· Demo

  • Repository:MengTo/threeui

    ThreeUI Community: Interaktive 3D- und WebGL-Komponenten für React

    ThreeUI Community ist eine quelloffene Komponentenbibliothek und ein interaktiver Katalog für 3D- und Shader-gestützte UI-Elemente in React. Das Projekt stammt von Meng To (DesignCode) und stellt den vollständigen Quellcode der kostenlosen Community-Komponenten ohne Login-Zwang bereit.

    5151SterneHTML

    Webentwicklung· Tool

  • Repository:img2threejs/img2threejs

    img2threejs: Bild-zu-3D-Rekonstruktion als prozeduraler Three.js-Code

    img2threejs rekonstruiert Objekte aus Referenzbildern als prozeduralen, animationsbereiten Three.js-Code. Statt Fotogrammetrie oder Mesh-Extraktion setzt das Projekt auf token-effiziente Code-Generierung.

    15.104SternePython

    KI & AI· Tool

  • Repository:ashemag/human-atlas

    Human Atlas: Open-Source-3D-Anatomie-Explorer im Web

    Human Atlas ist ein interaktiver 3D-Anatomie-Explorer im Browser, der auf React, Three.js und shadcn/ui basiert. Das Projekt zerlegt den Datensatz BodyParts3D in 2.234 einzeln wählbare Meshes, deckt 15 anatomische Systeme ab und ermöglicht Explosionsansichten sowie gezielte Suchen.

    2872SterneTypeScript

    Webentwicklung· Tool

Lassen Sie uns über Ihr Projekt sprechen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.