Isometric House Builder — Zeichnen Sie Ihr Haus für das Widget « Hausansicht »

[guim31]

Isometrischer Hausbauer — Zeichnen Sie Ihr Haus für das Widget „Hausansicht“

Das Widget Hausansicht von Gladys v5 bietet vier vorgefertigte Illustrationen und akzeptiert vor allem Ihr eigenes Bild, auf das Sie anschließend Ihre Geräteaufkleber platzieren. Ich wollte meins, mit meiner echten Grundfläche, meinem echten Dach und meinem Tor — also habe ich ein kleines Tool dafür gemacht.

Tool öffnen · Anleitung

Nichts zu installieren, alles läuft im Browser, es ist kostenlos und frei (MIT).

---

Was es kann

• Man zeichnet die Grundfläche im Grundriss auf einem Raster von 1 m oder 0,50 m — jede Wandseite zeigt ihre Länge an, sodass man die echten Maße anpassen kann.
• Dach: Walmdach, Satteldach, Anbau, Flachdach, mit einstellbarer Neigung und Überstand. Die Firste zwischen zwei Flügeln werden berechnet.
• Öffnungen: Fenster, Fensterläden, Türen, Garagentor, per Klick auf jede beliebige Wand platziert.
• Mehrere Gebäudeteile: Der Gartenschuppen hat sein Flachdach und seine Verkleidung, während das Haus seine Ziegel behält.
• Umgebung: Pool, Terrasse, Zufahrt, Hecken, Bäume, Auto — und Mauer + Tor/Türchen, wobei das Tor die Mauer automatisch dort öffnet, wo es platziert wird.
• Materialien: Ziegel, gemusterte Ziegel, Schiefer, Stahlblech, Backstein, Verkleidung, Stein, Fachwerk.
• Freie Kamera: Man dreht das Haus mit der Maus um 360°, von der flachen bis zur fast senkrechten Ansicht.

Am nützlichsten für ein Dashboard

Eine Übersicht ist nicht besonders nützlich, um ein Gerät zu steuern: Das Tor macht nur wenige Pixel aus. Man kann daher auf einen im Grundriss gezeichneten Bereich zoomen — was außerhalb liegt, verschwindet, was ihn durchquert, wird scharf abgeschnitten, und die Kamera richtet sich auf das, was übrig bleibt. Ein Haus, so viele Bilder wie Widgets.

Jeder Zoom wird als benannte Ansicht gespeichert, und eine Schaltfläche exportiert alle auf einmal, wenn sich das Haus ändert.

Es gibt auch einen Nachtmodus, bei dem die Fenster beleuchtet sind.

Damit es gut integriert wird

Drei Einstellungen, die einen großen Unterschied machen:

1. Behalten Sie die Palette „Horizonte“ (die Standardeinstellung) bei: Sie übernimmt die exakten Farben der Illustrationen von Gladys v5.
2. Exportieren Sie als PNG, transparenter Hintergrund, Größe Gladys — 2560 × 1600. (Gladys skaliert jedes Bild auf 2560 px der längeren Seite: Exportieren in 4× ergibt ein weniger scharfes Bild, nicht schärfer.)
3. In Gladys: Widget Hausansicht → Bild hochladen → darauf klicken, um Ihre Aufkleber zu platzieren.

Datenschutz

Keine Netzwerkanfragen, keine Konten, keine Auswertungen: Ihr Projekt bleibt im lokalen Speicher Ihres Browsers. Die Schaltfläche Speichern erzeugt eine .house.json-Datei, die Sie bei sich zu Hause aufbewahren.

Einziger bekannter Ausnahmesfall: Die Schaltfläche Teilen kopiert einen Link, der das gesamte Projekt in seiner Adresse enthält. Das ist dafür gemacht, sein Haus jemandem zu schicken — das ist nicht der Link, den man teilt, wenn man sein eigenes nicht zeigen möchte.

---

Was es nicht ist

Ich beabsichtige nicht, daraus ein ultra-ausgereiftes Modellierungstool oder eine realistische Darstellung zu machen. Das Ziel ist bescheiden und bewusst: eine schöne isometrische Illustration zu erstellen, die erkennbar ist und sich sauber in ein Dashboard integriert. Keine fotografischen Texturen, keine Innenräume, kein schräges Gelände.

Im Gegenteil, Feedback zu Fehlern ist sehr willkommen. Ich habe bereits eine ganze Reihe davon korrigiert, indem ich es an meinem eigenen Haus verwendet habe, aber Ihre Häuser sehen nicht wie meins aus — Giebel, Dächer mit nur einer Seite, U-Formen, große Überstände: Es gibt sicherlich noch Fälle, die nicht gut funktionieren.

Wenn Sie auf etwas Seltsames stoßen, ist das Effektivste:

1. Klicken Sie auf Speichern, um Ihre .house.json-Datei abzurufen,
2. Machen Sie einen Screenshot von dem, was nicht stimmt,
3. Und öffnen Sie ein Issue hier: Issues · guim31/isometric-house-builder · GitHub

Mit der Datei ist der Fehler in wenigen Sekunden reproduzierbar — ohne sie ist es Ratespiel.

Viel Spaß beim Zeichnen

[Will_71]

Genial, ich liebe die Idee.

[StephaneB]

Super Idee, @guim31! Ich werde schnell testen…

[StephaneB]

Ich habe mich gut amüsiert und bin zu folgendem Ergebnis gekommen (ohne zu viel zu feilen…):

Drei Dinge, die ich nicht hinbekommen habe:

1. Ich habe das Gebäude mit 2 oder 3 Stockwerken getestet. Aber ich bräuchte etwas dazwischen, denn mein Haus hat ein 3. Stockwerk, in dem das Dach bereits beginnt. Im Tool sollte man die Höhe der Stockwerke separat definieren können
2. Mein Haus ist ein einfaches Rechteck, außer an der mit ‹ 2 › markierten Stelle: Diese Terrassentür ist in einer Vertiefung (siehe Bild am Ende der Nachricht). Ich habe im Tool gesehen, wie man ‹ Kästchen › entfernen kann, aber man sollte das an bestimmten Stockwerken und nicht an anderen tun können
3. Und schließlich das Problem mit dem unebenen Grundstück: Ich gelange vom Erdgeschoss aus in die Garage, aber dann ist mein Grundstück und meine Terrasse auf der Höhe des zweiten Stockwerks. Im Tool wäre es für mich in Ordnung, wenn man ein Element ‹ Terrasse › mit einer größeren Erhöhung definieren könnte. Das Maximum liegt bei 1,20, und ich möchte 2,50 (die Höhe des Stockwerks) definieren können

Aber es ist trotzdem cool!!

Meine ‹ Vertiefung › der Terrassentür:

[guim31]

Danke für dein Feedback!
Ich sag dir, ob ich das einbauen kann

[guim31]

@StephaneB, die drei Punkte sind erledigt — lade die Seite neu, um die neueste Version zu erhalten.

1. Die Stockwerke — Sobald ein Gebäude mehr als ein Stockwerk hat, bietet das Körper-Panel jetzt eine Höhe pro Ebene. Dein „Zwischenstockwerk“ ist das Dachgeschoss: zwei volle Ebenen + eine letzte niedrige Ebene (z. B. 2,50 / 2,50 / 1,20 m), und das Dach beginnt darüber.

2. Die Vertiefung (aber anders) — Ich habe keine unterschiedliche Grundfläche pro Stockwerk gemacht: Das würde den gesamten Kern des Tools betreffen (das Dach, die Giebel, die Wände hängen davon ab), für einen seltenen Fall. Stattdessen hat jedes Fenster einen Vertiefung-Einstellung (bis zu 80 cm): Die Terrassentür vertieft sich in die Wand, mit dem Stockwerk, das darüber weitergeht — genau wie in deiner Skizze. Und es ist echte Geometrie: Die Nische hat ihre Rahmen und ihren Sturz, die sich unter allen Winkeln korrekt beschatten.

3. Die Terrasse — Die Aufsicht geht jetzt bis 3 m. Hanggrundstück: Terrasse auf Höhe des Stockwerks, Garage, die sich darunter öffnet. (Das Grundstück selbst bleibt flach, das ist bewusst )

Um dir Zeit zu sparen, hier eine Datei, die dein Haus so wiedergibt, wie ich es verstanden habe — drei Stockwerke, davon eines im Dachgeschoss, die Terrassentür zurückgesetzt, die Dachfenster, die hohe Terrasse. Öffne sie mit dem Öffnen…-Button und passe sie an:

maison-de-stephane.house.json (Rechtsklick → „Ziel speichern unter“)

Falls etwas nicht richtig dargestellt wird, schick mir deine .house.json-Datei (Speichern-Button) — das ermöglicht es, es in wenigen Sekunden nachzubilden.

[StephaneB]

Danke @guim31. Es wird immer ähnlicher.

Das entsprechende JSON: ma-maison.house.json - pCloud

Einige Rückmeldungen:

• Die Mindestgröße einer Terrasse beträgt 0,40x0,20 und skaliert in Schritten von 0,25. Daher ist es nicht möglich, eine Terrasse von 3,0x4,0 zu erstellen und sie korrekt an den Rechtecken des Gebäudes auszurichten. Wäre eine Grundgröße von 0,25x0,25 möglich?
• Ich verstehe nicht, wie das Feld ‹ position › eines Objekts entlang einer Wand (ein Fenster, eine Tür,…) definiert ist. Der Wert ‹ 0 › sollte intuitiv dem Winkel entsprechen, an dem die Wand beginnt. Oder eventuell dem nächstgelegenen Objekt. Aber das ist nicht der Fall…
• Die Vertiefung für eine Tür funktioniert gut. Aber idealerweise sollte man definieren können, dass die Vertiefung in der Wand breiter ist als die Tür. Bei mir zum Beispiel sind es 80 cm auf jeder Seite…
• Bei den Außenelementen wäre es möglich, ein Element ‹ Treppe › zu haben, und idealerweise, dass es die Terrasse ‹ aussparrt ›? Damit ich von meiner Terrasse heruntergehen kann Na gut, das ist wirklich ein Detail, nicht schlimm, wenn es nicht möglich ist…
• Bei einigen Ausrichtungen ist die isometrische Ansicht nicht korrekt:

Hier ist es gut:

Hier ist es nicht gut:

[guim31]

Danke für dein Feedback, jetzt muss ich wohl ein paar Stunden warten, bis meine Claude-Credits wieder da sind ^^ aber ich werde mir das ansehen.

Die Idee mit den Treppen ist gut, aber ich denke, dass wir bei der „Aushub“-Terrasse zu kompliziert werden könnten.

Für den Rest warte ich, bis mein Lieblingshandwerker wieder bei Kräften ist, um dir zu antworten

[guim31]

Ich habe Änderungen vorgenommen, alles ist online, du kannst die Seite neu laden.

Falsche isometrische Ansicht. (transparente Terrasse) : Eine erhöhte Terrasse wurde nicht exakt nach Flächen sortiert, und deine vier Terrassen, die koplanar und mit demselben Bodenbelag waren, verschmolzen zu einer einzigen Oberfläche, die das Haus umhüllte, gleichzeitig vor einer Wand und hinter einer anderen. Korrigiert.

Größe der Terrassen. Die Schritte sind jetzt 0,25 : Alles fällt jetzt auf runde Viertelmeter.

Das Feld „Position“. Es zeigt jetzt den Abstand von der Mauerecke bis zum Rand der Öffnung über die gesamte Fläche an. Deine bestehenden Dateien öffnen sich unverändert, nur die Anzeige ändert sich.

Einzug tiefer als die Tür. Erledigt. Sobald der Einzug platziert ist, erscheinen zwei Einstellungen: „Seitlicher Überstand“ und „Überstand oben“. Deine 80 cm auf jeder Seite sind machbar; der Flügel und sein Rahmen behalten die Größe der Tür.

Treppe. In den Außenbereichen hinzugefügt. An der Basis einer erhöhten Terrasse platziert, nimmt sie deren Höhe an und dreht sich automatisch dazu, etwa 18 cm pro Stufe. Sie wird an die Terrasse angelegt, ohne sie auszugraben — wie ich dir sagte, würde das Ausgraben einer Platte mit einer anderen uns viel weiter führen, und optisch sieht es sehr gut aus.

Sag mir, ob es besser ist?