Grundriss in 3D mit WebGL nachbauen


Update: Noch einfacher geht es mit dem Programm Home Design 3D welches auf Steam für Mac und PC zu haben ist. Oder gleich im Browser online mit floorplanner.com.

Wenn man ein Gefühl für die Größenverhältnisse einer Wohnung bekommen möchte und nur einen Grundriss besitzt, der kann entweder zu Stift und Block greifen oder dreidimensional am Computer nachbauen. Ich zeige hier, wie das geht und wie man das 3D Modell anderen Leuten per Link interaktiv zur Verfügung stellen kann.

Kein Maya, kein 3D Studio Max, kein Blender

Während des Studiums habe ich mich eingängig mit Software zur 3D Modellierung und Rendern beschäftigt. Mein erster Impuls waren deswegen die teuren Tools von damals.

Leider habe ich weder die Lizenzen und anders als beim Fahrradfahren verlerne ich solche Skills wieder, wenn ich sie nicht regelmäßig nutze. Obwohl Blender kostenlos für Mac, Linux und Windows erhältlich ist, habe ich nach kurzer Zeit aufgehört und nach einer Alternative gesucht.

Sweet Home 3D

Gelandet bin ich dann bei einem kostenfreien Java-Programm namens Sweet Home 3D. Auf den ersten Blick sieht die Webseite genau so unaufgeräumt wie das Tool selber aus.

Trotzdem macht es genau das, was ich wollte: Es erstellt aus einem Grundriss als Bilddatei und der Angabe, wie lang eine Mauer in Metern ist, ein maßstabsgetreues 3D Modell der Mauern.

Einrichten mit IKEA Möbeln

Manche Leute geben viel Geld für Möbel aus. Ich gehöre nicht dazu. Mein Wohnzimmertisch war jahrelang ein IKEA LACK Tisch für 10 EUR. Das auch auch den Vorteil, dass man die 3D Modelle für die Einrichtung und Originalgröße frei im Internet findet.

Die Modelle sollten im Wavefront OBJ-Format vorliegen. Einfach IKEA, den Namen des Möbelstücks und OBJ in Google eingeben und runterladen. Achtung: Manche Modelle sind sehr (!) detailliert. Wenn ein Schrank 16 MB als 3D Modell wiegt, dann sollte man lieber die Version mit 500 KB nehmen. Immer auf „low poly count“ achten.

Nun kann man die Objekte in Sweet Home 3D importieren und an die entsprechende Stelle rücken und unter 3D View dann Export to .OBJ wählen.

Keine Unreal Engine, keine CryEngine und kein gerenderter Film

Die meisten Gaming-Engines sind heute erstmal kostenlos. Die Unreal Engine kannte ich noch aus meiner Jugend als ich noch Level für Videospiele gebaut habe. Aber auch hier musste ich nach kurzer Zeit zugeben, dass ich nicht schnell genug vorwärts kam. Die Editoren sind doch heute komplexer geworden als ich es von der Unreal und Build 3D Engine kannte.

Dazu kommt das Problem: Was macht man nachher mit dem fertigen Projekt? Für Mac, Windows und iOS kompilieren?

I have seen the future: WebGL

Ich hätte es nie anzweifeln dürfen: The Future is in your Browser™. Es gibt eine Game Engine bei der sogar der Editor im Browser läuft: PlayCanvas.com. Das ist kostenlos solange man die Projekte öffentlich lassen will.

Dort habe ich ein Demo-Projekt aufgemacht und das .OBJ (16 MB) 3D Modell aus Sweet Home 3D importiert. Das ging schneller als in der Unreal Engine und war sogar out-of-the-box halbwegs gut beleuchtet.

Nun kann man einfach einen Build als Link generieren und durch die Gegend schicken: https://playcanv.as/p/kQGf1uEa/ Und natürlich läuft das dank offenen Webstandards auch im Safari Browser auf einem iPhone 7 absolut flüssig.

Das Endergebnis läuft im Browser auf dem iPhone 7

Alternative: Floor Planner

Mittlerweile gibt auch eine Möglichkeit vollständig im Browser zu bleiben. Und zwar mit dem Floor Planner. Damit entfällt der Wechsel zwischen den Programmen vollständig. Allerdings kann es sein, dass hier später kosten durch die Nutzung entstehen.


Beitrag veröffentlicht

in

von

Kommentare

4 Antworten zu „Grundriss in 3D mit WebGL nachbauen“

  1. Avatar von Denise
    Denise

    Danke für den Tipp, wirklich sehr cool, Marc! Du hast sogar Dein Bild aus GTA im Wohnzimmer nicht vergessen. :)

    Die neue Wohnung bietet Euch auf jeden Fall mehr Raum. Freut mich.

    1. Avatar von Marc
      Marc

      Es sah sonst aus wie ein TV wenn dort keine Textur drauf war. ;-)

      PlayCanvas ist auf jeden Fall ein unglaublich cooles Tool.

  2. Avatar von wm
    wm

    Cooler Tipp.
    Prinzipiell funktioniert der import einer obj Datei aus Sweethome 3d Zeichnung (Grundriss) ja wirklich wunderbar… Aber, alle Texturen und farben sind dann weg…Argh.
    Wie bekomme ich die ganzen Farben und Texturen zurück?
    Thanks

    1. Avatar von Marc
      Marc

      Das weiß ich leider auch nicht. Ich habe es nachtextutiert. Ich denke auch mal, dass es nicht anders geht. Die Materialen hatte er aber meiner Erinnerung nach schon importiert aber nicht zugeordnet.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert