Create an Explorable Home in an Online 3D World with Open Source
I use SweetHome3D, Blender and his plugin Armory 3D Engine to create a web explorable home that I deployed with Altervista free space. This software are open source and work in each Desktop operating system (Winodws, OsX, Linux, maybe also BSD).
See the simple demo:
I need to share with someone a 3D explorable home to simply share with others the chosen forniture and some options that can be explored many times by the clients to select better choices.
I put in this gitlab repo all files that I use to create the website: Room generated with SweetHome3D, blender project and folder ready for altervista.
Requirements
Download and Install SweetHome3D.
Download and Install Blender.
Download Armory 3D Engine (you can pay but you can also click just download). So add into blender plugins, edit>preferences, click on add-ons on the left menu, click on install button and follow the procedure by selecting the downloaded zip.
Log in on Altervista we do not need advanced tools, we only need to put file into a file system and we will use full free features.
Create 3D house model
By using SweetHome3D (if you need you can see the tutorial to learn this software, it is very simly and intuitive).
You can create wall and room with tool in the top toolbar and after with the tool in the left board you can add forniture, windows etc.
If you need a Roof you can import your 3D model or search a for a Sweet Home 3D extension for example you can read there.
Export in .obj for blender import (into 3DView menu item you can find the buttons).
Import on Blender and Create Data for web
Open blender, delete the default cube and import your .obj (Blender tutorial if you do not know how) exported. Scale it because it will be too large.
Now on the RenderProperties you can find a menu with Armory Player set runtime Browser and Camera Viewport and your scene as scene.
You can try the tour by clicking play button, it will open your browser with the demo, with mouse click and move you can orientate your view and with arrows you can move.
In this simple way you can go through the object like a gohst but this is 0 config way if you want more specific actions you can create with Armory because it is a full featured Game Engine, for this tutorial I stopped here for more info you can start with this tutorial for beginners.
Armory Exporter
Now go to Armory exporter in the RenderProperties, click on + button to add a configuration and click Build.
Now you can also click publish and it open the folder named html5 with the compiled code.
Deploy on Altervista
Create a folder on altervista file system (if you need tutorial there) with your favourite name and into put the html folder with also the two file that you find in the folder before .hxml and .hxproj.
Now you can go into your folder/html5/index.html and open It, you can use it.
Reuslts will be like there.
Add instruction explanation
You can also edit the HTML to add instruction to use into the .html by add simple <p> tag with textual instruction for example “Use W, A, S, D or Arrows to move and Mouse motion + Left Click to orientate.”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Armory</title>
</head>
<body style="margin: 0; padding: 0;">
<p>
Use W, A, S, D or Arrows to move and Mouse motion + Left Click to orientate.
</p><p align="center"><canvas align="center" style="outline: none;" id='khanvas' width='1920' height='1080' tabindex='-1'></canvas></p><script src='kha.js'></script>
</body>
</html>
Results will be like there.
You can adit this file as you want and if you know php you can also implement some simple login to protect the access or add any other kind of informations.
Conclusions
With simple and intuitive software we can create an explorable 3D home in few time… Yes it should be improved, but it work and you reach the results fast, now you can improve materials and light to make more realistic results, you can also create better 3D models, you can improve game engine experiece by adding collider and better commands, you can also add button on screen to use with mobile phone and many others things.
Some interesting things can be to create a template ready to use for Godot Engine or for Babylon.js two open source game engine that can replace Armory 3D Engine.
So enjoy to explore your 3D evironments web and if you find improvement or find new solutions for game angine or any other things join in the comment with community!
