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

RepositorySam1983Aing/casa-serraDemo

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.

Das Wichtigste

  1. Der scheinbar flache 2D-Plan ist ein 3D-Modell, das bei 1,2 Metern Höhe geschnitten und mit langer Brennweite von oben betrachtet wird.
  2. Beim Scrollen wachsen die Wände, die Kamera wechselt auf Augenhöhe und durchquert die Räume nacheinander.
  3. Räume bleiben Linienzeichnungen, bis die Kamera den jeweiligen Bereich betritt; erst dann werden fotorealistische Texturen eingeblendet.
  4. Gebaut mit three.js, GSAP ScrollTrigger und Lenis als statische Dateien ohne Build-Schritt, unter Verwendung von CC0-Texturen von Poly Haven.
  5. Die Geometrie wurde vollständig über Code generiert, ohne Werkzeuge wie Blender.
  6. Für die Erstellung benötigte der Autor rund 70 Prompts, vier Versionen und zwei Wochen Arbeit mit Claude Code und Opus 5.5.

Warum das relevant ist

Das Projekt zeigt, wie scroll-gesteuertes WebGL-Storytelling für Architektur, Immobilien oder Hotels ohne komplexe Build-Pipelines umgesetzt werden kann. Zugleich demonstriert es einen strukturierten Prompting-Workflow, bei dem KI-Assistenten schrittweise mit Kontrollpunkten statt in einem Einzelschritt eingesetzt werden.

Einordnung

Casa Serra befindet sich laut Repository in einem frühen Entwicklungsstadium (Work in progress). Es zielt vor allem auf Frontend-Entwickler, Creative Technologists und Webdesigner ab, die anspruchsvolle 3D-Landingpages erstellen wollen. Das Projekt löst das Problem des harten Bruchs zwischen technischem Grundriss und räumlicher Begehung durch einen flüssigen, scrollbaren Übergang. Der Verzicht auf Modellierungssoftware wie Blender und der direkte Code-Ansatz erfordern jedoch erhebliche Rechenleistung; Texturen schlagen mit etwa 39 MB auf Laptops und 13 MB auf Mobilgeräten zu Buche, wofür ein Fallback auf Standbilder und Videoclips integriert wurde.

Erwähnte Links

Gefunden in

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:MengTo/seijaku

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

    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.

    32SterneHTML

    Webentwicklung· Demo

  • Video

    Video:Sean Kochel

    Scrollbare 3D-Websites erstellen mit scroll-world und Claude

    Sean Kochel demonstriert, wie man mit dem Open-Source-Skill scroll-world und Claude interaktive Websites mit scrollbaren 3D-Animationen baut. Das System nutzt die Higgsfield-API zur Bild- und Videogenerierung und verkettet die Szenen zu einer zusammenhängenden Navigation.

    KI & AI· Anleitung

  • Repository:oso95/scroll-world

    scroll-world: Agent-Skill für nahtlose 3D-Scroll-Landingpages

    scroll-world ist ein Agent-Skill für Claude Code, Codex und SKILL.md-kompatible Tools. Das Werkzeug erstellt Landingpages mit nahtlosen Kameraflügen durch KI-generierte Szenen beim Scrollen.

    8963SterneJavaScript

    KI & AI· Tool

  • X-Post:Himanshu Hingorani

    KI-gestützter Workflow für 3D-Webdesign und interaktive Frontends

    Himanshu Hingorani stellt einen mehrstufigen KI-Workflow für kreatives Frontend-Design vor, der Midjourney v7, Claude Opus 5 sowie Cursor und Claude Code kombiniert. Anhand des Projekts 'Zephyr' demonstriert er eine interaktive 3D-Bühne mit Scroll-Animationen und plädiert gegen uniforme Standard-SaaS-Landingpages.

    28Lesezeichen2664Aufrufe

    KI & AI· Demo

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

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

Ein Teil von diesem Inhalt wurde mit KI gemacht.