3D RAUM­PLANER PER SCRIPT-TAG

Eigenständiger Raumkonfigurator als Web Component – einbettbar in jede Website ohne Framework, ohne Konflikte, ohne Setup.

Live Demo Minimal-Beispiel
Script-Taggenügt zur Integration
Three.jsRendering adaptiv
Konfliktedurch Shadow DOM
Moduleon demand geladen

Demos

Kunden-Setups

Jeder Kunde bekommt seine eigene Config – nur aktivierte Module werden geladen.

Fenster
Fenster Müller GmbH
Nur Fenster-Modul aktiv. Modelle auswählen, Größe anpassen, Wand platzieren – ohne Fliesen-Code im Bundle.
 Fliesen
Fliesen Schmidt GmbH
Nur Fliesen-Modul, warmes Branding. Fenster-Code wird nicht geladen.
Access Control
Access Gate Demo
Code „DEMO-2025" schaltet Premium-Features frei.
 Upload
Textur-Upload
Eigene Bilder als Bodenbelag hochladen und live im 3D-Raum sehen.
 Modul
Fliesen-Katalog
Musterfliesen, Sub-Kategorien und Farbvorschau.

Technologie

Gebaut für Produktion

Kein Backend nötig – alles läuft im Browser. Kein CSS-Konflikt, kein Framework-Lock-in.

Lit Web Components
Shadow DOM – kein CSS-Konflikt mit der Host-Website, kein Framework benötigt.
Three.js 3D Rendering
Adaptive Qualität je nach GPU – High / Medium / Low Presets automatisch.
Lazy Module Loading
Nur aktivierte Module werden geladen – kein unnötiger Overhead für Kunden.
Branding via Config
CSS Custom Properties, Logo, Schrift und Farbpalette vollständig per JSON steuerbar – jeder Kunde bekommt sein eigenes Look & Feel ohne Code-Änderung.
Access Control
Premium-Features per Code, E-Mail oder Session-Token freischaltbar. Serverseitige Validierung, localStorage pro API-Key.
Mobile Ready
Bottom Sheet, Touch-Controls, reduzierte Texturauflösung für Mobile.
Dirty-Flag Render Loop
Nur rendern wenn Änderungen vorliegen – schont Akku auf Mobile.
Textur-Upload
Eigene Bilder als Fliesen oder Bodenbelag live im 3D-Raum sichtbar.

Integration

Ein Script-Tag genügt

Kein npm, kein Build-Step auf der Host-Website nötig.

<!-- 1. Skript einbinden -->
<script type="module"
        src="https://cdn.yourhost.io/room-configurator.es.js"></script>

<!-- 2. Component platzieren -->
<room-configurator
  api-key="rc_ihr_key"
  config-url="https://api.yourhost.io/v1/config/kundenname"
  locale="de"
  theme="light"
></room-configurator>

<!-- 3. Fertig. Keine weiteren Abhängigkeiten. -->