Creating your custom residential 3D showcase

We live in a time in which increasingly more things happen entirely on the web. We store our files in the cloud, order our food or clothes through the internet and share our content whether it is a picture or a video through a wide array of online service providers. Now we can even walk through a virtual version of a house or an apartment before we decide to visit it in person or even rent or buy it right away.

While tours consisting of photo-bubbles are slowly becoming a standard, the “what you see is what you get” approach is not always the best way to advertise a property. In situations where a property is still under construction or getting renovated or also in cases where a more interactive approach is needed, fully virtual solutions that are showcasing a 3D model instead of photos come in very handy.

With the introduction of 3d.io, Archilogic provides an extremely versatile toolkit to create your own, customised virtual walk-through with relative ease.

This publication is going to show you how to get there.

1. Get a 3D Model from a 2D Floor Plan:

• Go to your Archilogic Dashboard and order a Basic 3D Model by uploading a 2D floor plan or create/import your own 3D model using the Archilogic 3D Editor
• If you uploaded a 2D floor plan to Archilogic, you’ll receive a 3D model within 24 hours which looks like this:

Example of an Archilogic basic 3D model

• The furniture as well as the architectural items are generic — essentially a floor plan in 3D
• You can easily publish and share this model without any additional work as an iframe. See this tutorial for instructions
• If you wish to customize the appearance of your presentation but not the model itself go to step 3.

As an alternative to creating your own 3D models you can also approach one of our Certified Partners. These models can then still be turned into custom applications in Step 3.

2. Place furniture and/or edit architecture:

• Furniture: use the editor to delete, add, and change pieces of furniture. Click here to learn how to edit the furniture pieces in your model
• Architecture: before you can edit architecture you need to turn off the realistic lighting setting. This will expose all of the architectural tools in the editor. Once you are happy with your work turn realistic lighting back on.
• Camera Bookmarks: use the camera bookmarks menu in the lower left corner of the screen to change the way the camera flies through your 3D model. Click here to learn how to edit the camera bookmarks.
• Make sure to save your model once you’re done with all the changes.

3. Customize, Publish & Share:

• Go to the AppCreator and select any of the templates to get started
• Click the “make a copy” icon on the top right in order to create your own app on the base of an existing template
• Give your app a title
• Reference your 3D model: copy/paste the URL of your Archilogic 3D Model in the “Scene” text box; the scene identifier will be automatically parsed from the string
• Your Archilogic 3D model will be automatically imported into your A-Frame scene along with all the camera bookmarks that you’ve set up in the Archilogic 3D editor, all the furniture pieces and the realistic lighting.

3d.io app creator

• Start customizing your model. Add a panorama, change the background color, show your logo where you’d like, add a disclaimer, and on-and-on; visit the A-Frame Docs to see what’s possible. In this particular model there are a number of additional features such as the floor plan overlay (a detailed tutorial for that is coming soon, stay tuned!). These are documented in the HTML code. Just ‘inspect’ when you have the App open in full screen or open the app in the AppCreator
• While the app creator menu offers quite a wide array of different customization options already, you can edit your showcase even further by diving into the HTML and A-Frame code of the scene. All you have to do is open the code tab of the app creator to gain full control of your 3d.io app.

• Share your app with friends by copying the URL which is displayed above the model

Aaaand that’s it! You’ve just created your own, fully customised 3d showcase.