Casa Serra: 3D-Architektur-Visualisierung im Browser mit Three.js und Opus 5.5

X-PostMeng ToDemo

Meng To empfiehlt das Projekt Casa Serra von Samnang Aing. Die webbasierte 3D-Erfahrung wandelt einen scheinbar flachen 2D-Grundriss beim Scrollen nahtlos in ein begehbares 3D-Gebäude um, umgesetzt mit Three.js, GSAP und Opus 5.5.

Das Wichtigste

  1. Der Grundriss ist kein flaches Bild, sondern das reale 3D-Modell, das bei 1,2 Metern geschnitten und senkrecht durch eine Tele-Perspektive betrachtet wird.
  2. Beim Scrollen hebt sich die Schnittfläche, wodurch die Wände wachsen, während die Kamera auf Augenhöhe sinkt und Raum für Raum durchquert.
  3. Die Geometrie wurde komplett im Code ohne externe 3D-Software wie Blender generiert; Texturen stammen von Poly Haven (CC0).
  4. Der technische Stack basiert auf Three.js, GSAP ScrollTrigger und Lenis – ohne Build-Step aus einfachen JavaScript-Dateien.
  5. Die Erstellung erfolgte über rund 70 Prompts, vier Versionen und zwei Wochen iterativer Arbeit mit Claude Code und Opus 5.5.

Warum das relevant ist

Das Projekt demonstriert, wie LLMs wie Opus 5.5 bei anspruchsvollen WebGL- und Three.js-Szenarien komplexe Geometrie und Scroll-Trigger-Animationen erzeugen können. Statt statischer Renderings ermöglicht dieser Ansatz neue interaktive Präsentationsformen in der Architektur- und Webentwicklung.

Einordnung

Meng To hebt die Kombination aus Webdesign, 3D und Architektur als beispielhafte AI-Nutzung hervor. Wie die Projektdokumentation von Samnang Aing verdeutlicht, entstand das Ergebnis jedoch nicht durch einen einzelnen Prompt, sondern durch einen zweiwöchigen, iterativen Prozess aus strukturierter Prompt-Steuerung, Review-Schleifen und Teilschritten.

Original-Post

Meng To

@MengTo · 3. November 2026

novel way to mix architecture, web design and 3d. opus 5.5 is a beast with three.js. prompt: t.co/lCUggYLSik t.co/yxh76OBUQe

625 Likes13 Antworten938 Lesezeichen43.222 Aufrufe

Auf X ansehen
Weitere Posts im Thread (2)
  1. @asmirkn it does give you a foundation prompt that you can adapt to your ideas
  2. @dezign_ash the key is to find new ways to use ai for impossible things
Ausgewählte Antworten (5)
  • @asmirkn @MengTo wait the repo says there's no single prompt, how many rounds did you go through to get the walls building up in the right order as you scroll?
  • @dezign_ash @MengTo Floor plan to house on scroll is such a good storytelling pattern. Architects pitching clients with this instead of static renders would close way faster
  • @sukunatrader @MengTo damn. crazy
  • @arthurhumeau_ @MengTo Loooks so good
  • @heyraven_io @MengTo a building with a loading screen. civilization advances

Erwähnte Links

Links und Tools aus diesem Beitrag

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

Ähnliche Einträge

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

  • Repository:Sam1983Aing/casa-serra

    Casa Serra: Scroll-gesteuerter 3D-Rundgang aus einem Grundriss

    Casa Serra ist ein interaktives WebGL-Experiment, bei dem sich ein flacher Architektur-Grundriss beim Scrollen in ein dreidimensionales Gebäude verwandelt. Das Projekt setzt auf prozedurale Geometrie ohne 3D-Modellierungssoftware und entstand mithilfe von Claude Code und Opus 5.5.

    422SterneCSS

    KI & AI· Demo

  • X-Post:Meng To

    ThreeUI und Opus 5: 3D-Webseiten per Videoreferenz und Code-Generierung

    Designer Meng To nutzt Claude Opus 5, um auf Basis von Videoreferenzen interaktive 3D-Produktseiten in three.js oder Blender zu generieren. Sein quelloffenes Komponenten-Projekt ThreeUI erreicht nach wenigen Tagen hohe Abrufzahlen.

    2412Lesezeichen228.543Aufrufe

    KI & AI· News

  • X-Post:Meng To

    Meng To: Webdesign und Three.js-Szenen mit Opus 5.5 und Mobbin MCP

    Designer Meng To stellt ein 47-minütiges Video-Tutorial vor, in dem er zeigt, wie er mit Opus 5.5 und dem Mobbin MCP vollständige Landingpages mit interaktiven Three.js-3D-Szenen erstellt.

    796Lesezeichen27.042Aufrufe

    KI & AI· Anleitung

  • X-Post:Eric Buess

    Kreative Visualisierungen und 3D-Projekte mit Claude Opus 5.5

    Eric Buess kuratiert eine Reihe von Community-Projekten, die zeigen, wie Claude Opus 5.5 für programmatische Animationen, 3D-Modelle und Videoerstellung genutzt wird – oft rein über Code statt herkömmlicher Bildgeneratoren.

    337Lesezeichen79.948Aufrufe

    KI & AI· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

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.