Darstellung von 3D Modellen (SH3D) im eigenen WordPress Blog. – Damit es die ganze Welt sehen kann –

Die mit Sweet Home 3D erstellten Pläne vom Haus oder Wohnung oder Bau-/Konstruktionsplan (mein Blog) müssen Sie nicht für sich behalten. Die 3D Modelle können Sie auf ihrer Webseite einbetten und jeder kann sie sich von allen Seiten anschauen und hinein zoomen.

Dazu muss zuerst im Programm das Plugin ExportToHTML5 installiert werden.

Es erscheint anschließend im Menü (Tools – Export to HTML5 ). Mehr zum Plugin finden Sie im SH3D Forum.

Nun öffnen Sie ihr 3D Modell, exportieren es mit dem Plugin auf den Desktop oder Schreibtisch und entpacken die dortige Zip Datei. Darin ist alles enthalten, was der WebGL Browser zur Darstellung des 3D Modells benötigt. Bei mir sieht es wie folgt aus:

Inhalt Zip Datei

Ob ihr Browser oder andere WebGL unterstützen, sehen sie auf der Seite can I use.de. Am besten, Sie probieren es mit einem Doppelklick auf die Datei „viewHome.html“ einmal aus. Es öffnet sich der Browser und zeigt das 3D Modell, wie sie es im Programm Sweet Home 3D kennen, an. Die Perspektive und den Zoom ändern Sie wie gewohnt durch Mausbewegung.

Damit das 3D Modell im Blog eingebettet werden kann, muss der Inhalt der Zip Datei in das Upload Verzeichnis der WordPress Umgebung hochgeladen werden. Ich nutze dazu das FTP Programm Cyberduck und wähle als Pfad /WordPress/wp-content/uploads/2017/02/.

Im Beitrags fügen sie Text-Modus an der Stelle, wo das 3D Modell erscheinen soll, folgende Codezeile ein:

<iframe src=“{mein WP BlogPfad}/wp-content/uploads/2017/02/Podest_komplett/viewHome.html“ width=“100%“ style=“height: 100vh;“ frameborder=“0″></iframe>

Das Ergebnis ist sofort in der Vorschau des Beitrags sichtbar. Und hier sehen sie als Beispiel den Podest aus meinem Blog Bauanleitung zum selber bauen mit Sweet Home 3D zeige:

Wer html Kenntnisse hat, kann in der Datei „viewHome.html“ individuelle Einstellungen vornehmen. Außerdem bieten die Attribute von iFrame weitere Möglichkeiten, das Aussehen anzupassen.

Mich stört noch der große untere Abstand zwischen 3D Modell und der Fußzeile im iFrame. Da ich jedoch nicht über die notwendigen html Kenntnisse verfüge, bitte ich um Kommentare dazu.

Hangloose

Schreibe einen Kommentar