Presenting an Office Space Interactively

In this example we are walking through all the steps to get from a 2D floor plan to an interactive presentation of an office space. First, here's the result:

Go fullscreen or open and remix!

Now let's go ahead and build this from scratch!

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
  • You'll receive a model which looks like this:

  • 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 customise the appearance of your model go to step 3.

2. Place furniture and/or edit architecture:

  • Furniture: use the editor to delete, add, and change pieces of furniture
  • 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 be sure save it and then turn on realistic lighting again

3. Customise, 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
  • Give your app a title
  • Reference your 3D model: copy/paste the URL of your 3D Model in the "Scene" box; the scene identifier will be automatically parsed from the string
  • Start customising 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
  • Share your app by copying the URL which is displayed above the model