Three weeks ago, the first public version of the Export to HTML5 plug-in was released. Similarly to Sweet Home 3D viewer, this plug-in lets you generate HTML pages able to display in 3D the homes designed with Sweet Home 3D in any HTML5 web browser compatible with WebGL under all systems, including iOS and Android.
Finding a replacement for Java applets
When iOS, the system of iPhones, appeared, Apple decided that the version of their web browser Safari included in this system wouldn't support plug-ins able to run Java applets or Flash programs. This meant that Sweet Home 3D Online or Sweet Home 3D viewer, an applet able to display the 3D view of a
- Google stopped supporting plug-ins in Chrome, Mozilla announced they'll stop supporting them in Firefox by the end of 2016, whereas plug-ins have never been supported in Edge, the new default browser in Windows 10. Therefore, even Oracle, the editor of the Java plug-in, decided to deprecate it in the coming Java 9.
.sh3d file and view it in 3D.
Export to HTML5 plug-in
Once you have downloaded this plug-in, installed it (under Window and Mac OS X, just double-click on the
.sh3p file) and relaunched Sweet Home 3D, the new Tools > Export to HTML5 menu item will appear in the program. This menu item will let you choose a ZIP file where the edited home will be exported. Then it will generate a ZIP file with the following content:
viewHome.htmlfile that contains a 3D canvas you can add to your HTML page, along with required scripts and other tags
viewHomeInOverlay.htmlfile that contains a button you can add to your HTML page, this button being able to display the given home in an overlay (like in the updated Sweet Home 3D Gallery)
.zipfile similar to a
.jsfiles able to display the previous file.
Just unzip the file generated by the plug-in, and open
viewHomeInOverlay.html in a web browser to check the results, preferably using Firefox which allows to read local files.
The button shown in the
viewHomeInOverlay.html will display the 3D view in a pane that covers 90% of the browser window like the following button does.
The HTML canvas shown in the
viewHome.html file will display directly the 3D view in a web page like the canvas shown below.
Just feel free to add any information or images to the HTML page of your choice to customize it as you wish, or reuse the HTML code they contain in your own pages. If needed, change the options like the rotation speed or the visibility of the navigation arrows described in the HTML comments of
viewHomeInOverlay.html files. Once you're ready to publish your page, upload it on your web server along with the
lib folder and the
.zip file of the exported home.
If you need to display other homes on your web site, use the Tools > Export to HTML5 menu item for each of them. As the content of the
lib folder is always the same, just avoid to duplicate it on your web server to prevent the users of your website downloading the same
.js files for different homes. If you want to propose mainly this feature on smartphones and tablets, don't be too greedy and check how it works first on such devices (10 MB per exported file is probably a reasonable limit nowadays).
The navigation in the displayed home can be operated with the same keys and mouse gestures as the ones used in Sweet Home 3D. On touch screens, use your finger to turn around, and pinch to zoom in or out.
If needed, you may handle and even modify the displayed home with the API described in the following JSDoc.
Export your Sweet Home 3D files on sweethome3d.com
The Export to HTML5 plug-in should be useful to any webmaster who wants to show his homes in 3D. But, even if using directly the result of the plug-in doesn't require a big experience in web hosting solutions, this plug-in won't be useful for all the people who don't have any web site.
That's the reason why I added a new service to sweethome3d.com web site that allows registered users to upload their
.sh3d files to view them in 3D in their browser, with a title and a comment like in this example and in the screen capture shown below.
Once the web server has received your
.sh3d file, it simply applies the Export to HTML5 plug-in on it and returns a link to a web page that displays your home in 3D. If you want and if your
.sh3d file contains only 3D models and textures that can be freely redistributable, you may share the returned link after selecting the Share link to exported file with public option displayed in the Exported homes manager page shown below when you're connected to the new service.
View free 3D models in 3D
My very first goal during the development of SweetHome3DJS project was to be able to display 3D models at OBJ + MTL format with WebGL. This ended to the "surprise" published for Sweet Home 3D 10th birthday which displays in 3D one of the examples of the gallery exported to OBJ format. This ability to interpret OBJ files was needed to display the furniture contained in the homes exported with the Export to HTML5 plug-in. But this feature still can be used alone to view in 3D a model at OBJ format, like the ones available in the free 3D models page. Therefore, I changed all the links on the images showing a 3D model in that page to make them display that model in 3D when the user clicks on the images, like in the examples below. Hope you'll like this bonus!
Making this change helped me to program a robust OBJ file interpreter than I could test with many different files, but also helped to discover that many models of the free 3D models page needed some fixing, either because some of their faces weren't correctly oriented, or because their file was uselessly too large. Such corrections were applied to 115 models that you can also find in the version 1.6.2 of the SH3F furniture librairies released a few days ago.
The final goal of this development is to propose the same features as the ones found in Sweet Home 3D Online. But even if the results obtained with the Export to HTML5 plug-in are encouraging, on the performances side of WebGL as well as on its portability on various browsers, there are months of work to reach this goal if it's feasible.
The next step should be to display the furniture catalog and the 2D plan to let users add and arrange furniture in their home.
In all cases, the existing Java application remains the most used and reliable way to design homes with Sweet Home 3D, so of course, I'll continue to maintain and improve it in the coming months!