Articles, Blog

Tutorial: Adding Floor Plans to Virtual Tours with 3DVista

December 4, 2019

Hi everyone, in this tutorial we will be talking about floor plans. Floor plans are very helpful, still support your
audience’s spatial understanding and let them move faster through an object. As opposed to moving around via the
hotspots placed on the actual panoramas which only let you move to adjacent
rooms, floor plans allow you to jump from room to room, or even between floors they
are vital tools especially in real estate and it only takes a couple of
clicks to add them. All you need to integrate a floor plan
on your virtual tours is an actual digital floorplan file in JPEG or PNG
and 3DVista Virtual Tour Pro. Please, keep in mind that Virtual Tour Standard does not support this feature, In case you are a Virtual Tour Standard user and still want to make use of the floorplan option and many more, please don’t
hesitate to contact us for upgrade possibilities. Again for the actual
floorplan any digital plan in PNG or JPEG will work, in case you don’t have a
digital floorplan at hand, you can easily create one with 3DVistas Floorplan maker or any of the common editing programs , make sure to export and save
the created plan as JPG or PNG. Ok, so a couple of basics before heading into it. You can add various floor plans which usually makes sense for objects with various floors. While I will be demonstrating how to export plans using
computer-generated images, you can obviously add floor plans equally to virtual tours composed of real photography. Steps are the same. So this is 3DVista Virtual Tour Pro. Let’s assume we already integrated all our panoramas, Now in order to add a floor plan we click on the tab floor plan, and add a floor plan. If you have various floor plans and therefore various floor plan files, one for each floor, you can either select them all, or add further files later on through this
at floor plan button, on the bottom left. In case you need to switch the order of
the floor plans because you mistakenly have the third floor before the second
floor, for example, you can simply move the files around by drag and drop. So by adding the floor plan here, the program automatically adds a new viewer window
in your virtual tour layout which we can see in the skin tab. This will be the window in which your audience will see the floor plan, and will be able to interact with it. While the other window continues to be your normal view of
playing your panoramas and virtual tour files. Now as you can see the size and
position of our floor plan viewer does not fit the size and format of the
vertical floor plan. Therefore we should move and resize the
viewer until it fits our floor plans format. So because your floor plan is
essentially a skin element, this is where you’re going to move it around, so whether you want it on the top right corner on the bottom left, here in the skin tab is where you actually place and size your floor plan. Remember that the settings on the right
hand side will always refer to the skin element you have currently selected in
the list. You can select elements either by clicking on them within the canvas or by selecting them in the list which might be safer especially when having
many or overlapping skin elements. What’s important to note is that while
we have various floor plan files one for each actual floor of the house, we only have one floor plan viewer. Why is that? Well, because we don’t want to clutter a
screen with as many viewer windows as we have floor plans. So instead we will add a drop-down menu in which the audience can select the floor they want displayed
on the floor plan viewer. You have to add this drop-down menu manually. Therefore I create a container which helps keeping various skin elements more organized. I drop the floor plan view into this container and add a drop-down menu as
well. Now I can either move and arrange the
elements within the container by dragging them around or by inserting
actual data on the right hand side to make sure they always stay at the very
top of the container for example. See how for the selected drop-down menu, the
position is defined by the ticked left and top coordinates. When setting these
at zero you’ll see the element jump up to the upper left corner of the
container, where it will stay even when moving or resizing the container. If I now set the drop-down menus size, to a 100%, I can be sure that the drop down menu will
always be perfectly placed within the container . The same goes for the floor
plan viewer So, by selecting percentage here my map
viewer will always adapt to the container size. Should you not want the elements to
resize when resizing the container Change the size back from percentage to
pixels and it will remain independent. If you want to know more about how to deal
with skin elements such as containers, buttons, etc Please help on over to our
skin tutorial. Whoops! Yeah. Here we go. So this is the mistake that I was talking about earlier. I was trying to select the entire container within the canvas but instead, I picked up only the drop down menu which I’m now moving on its own. That’s why we should really select the elements from the list on the right hand side. Ok, now here in the preview, you can see
how the placement and size of the elements actually turned out. Two things:
I can see that the map viewer element is actually too wide for my floorplan so we
get the margins on each side, plus, the drop down menu lists the wrong elements
it lists each panorama instead of each floor plan. Therefore we have to go back
to that element and change the drop-down content. And select only floor plans and from now
only display the tour floor plan items. The names of these drop-down
categories are the names that your floor plan files had when you originally
uploaded them. Should you prefer to label them first and second floor you’d have to rename each plan in the floor plan Now, secondly I reduce the size of the
container which automatically reduces the map viewer as we set it to be 100%
of the width of the container. And there we go no margins anymore. Since you can’t see the format of the floorplan within the map viewer and
container of the skin tab reducing the size of the container is a matter of
trying until you see it fits in the preview. As you could see this is really
quick however, some of you might not want to that people zoom in and out of the floorplan, should this be the case you can simply go back to the floor plan tab,
select the respective floor plan, and set minimum and maximum zoom levels to the
same as the initial zoom. For consistency, do this for all of your
floor plans. So much for the basis of floor plans. Now, on to the most important part the hotspots and radars. Radars will show your visitors where, that means in which panorama they currently are and in which
direction they are looking. Hotspots will let them jump to another room. Let’s start with hotspots. Hotspots on floor plans means, you place a hotspot, say a
small icon for example, within your floor plan, that will open the respective full
sized panorama when being clicked on. For placing them, select the floor plan tab,
click on one of the floor plans, and go to the sub tab hotspots. Now, as you might know from normal
hotspots within panoramas, you first select the format of
the actual hotspot, so do you want it to be a polygon which you draw onto the floor plan or do you want to upload your own image. I will upload my own image, a
small dot, which I usually use as floorplan hotspot, place it on the floor plan right at the spot that corresponds to one of your panoramas so let’s say the entry. Make sure to place it approximately where you feel the camera
stood when taking the panorama as this will imitate the position of your
virtual to user within the house. Same as with normal hotspots you can
change quite a few parameters on the right-hand side. When will the hotspot be
visible, always or on the rollover, the type of cursor, maybe a tool tip… And lastly, but most importantly, you assign
the hotspots action. Up to now the hotspot was merely a dot within your floorplan, now, you will determine the action it
triggers when being clicked on. Just as with normal hotspots
apart from opening a panorama, you can also play a video which is one of the
other actions listed here. So in our case, click open panorama and select the entry panorama and done. Do this with all of your panoramas to let your audience move quickly around the house. Now to add radars, you need to have hotspots established first. No hotspots no radars, simply because the program does not know where to place the radar. To add radars go to the floorplan tab. Select one of your floor plans and click on the sub tab Radar. Select the first hotspot
that you want to equip with a Radar from the list on the right hand side and
click Add. This automatically adds a Radar to the hotspot. Click and drag the radar round until it exactly fits the field of vision of the panorama that you see on the right hand side. As you can see, now the radar just about
includes the sofa and the fruit bowl. If you feel like you can’t set up the radar
accurately enough, you can also zoom and pan the panorama crop to the right of your radar. Zooming in will give you a more detailed view, and you can pan the panorama to a position which you feel is easier to capture with the radar. Let’s say the exact outer edge of the couch. Again, on the right column you get a lot
more settings for the radar, so you can change the actual length of the Radar, change its color and opacity, etc. Continue onto selecting the rest of your
hotspots from the top list and as you can see, the program automatically
adapted the settings we just defined, so all your Radars will have the same
length color and opacity, without you having to arrange them all individually, the only thing you do have to arrange is the orientation of the radar, should you want different Radars though? You can manually change the parameters and
determine different ones for each Radar. And that’s it, now you’ll always have a
radar indicating your current field of vision. Just a quick heads-up, at the
moment of filming this tutorial the changes in the Radars length are not
reflected in real-time within the canvas yet, so I’ll have to check it in the
preview for now. This is something we will be fixing for the next update
though so you might not even be affected by that anymore. Here in the preview, you
can see that while I spin around the radar spins with me. If you’re not happy
with the color or length of the radar just go back and change them. Let’s say we prefer a more subtle radar and want to change the length. For our example now, this is where we can
clearly seat what extent we actually reduce the size of our radar. And that’s it people. Give it a go yourself and you’ll see that with very little extra
effort you can enrich your virtual tours and improve usability which will surely
be appreciated by your customers Thanks for watching.

You Might Also Like


  • Reply Andres Garcia July 7, 2016 at 3:47 pm


  • Reply World Art Designs June 15, 2017 at 12:18 pm

    Hello, I attached a floorplan that has a squarish shape and it looks good on desktop fullscreen. But when I resize the window to smaller mobile size it gets squeezed into a small horizontal shape. Can I make the floorplan window adaptive the same way as explained in the tutorial for making skin elements adaptive? So I was thinking about placing the container with the floorplan in it in another larger container that has the same size as the Main Viewer. Would this make the floorpan more adaptive?

  • Reply camaxide March 2, 2018 at 11:54 am

    We have multiple buildings with multiple apartments in our project, can we have different floorplans showing up only when the viewer looks at the correct panoramas? so if you enter apartment 1 then you can toggle the apartment 1 floor plan – while of you are in apartment 15, only that plan is shown?

  • Reply Tomek Rospondek November 4, 2018 at 5:57 pm

    5:44 LOL lovely 😀

  • Reply brenda becerra co February 13, 2019 at 3:42 pm

    Se ve similar al Tourweaver, hay mejoras para el interfaz y no solo sea transiciones?

  • Reply Harsh Sharma April 18, 2019 at 6:28 am

    does 3DVista support apng as hotspots on floor plan?

  • Reply filardodesigns July 1, 2019 at 5:12 pm

    Very cool! This function does not seem to be available for 360 videos however, are there any plans to enable this in the future?

  • Reply Linn Koontz July 16, 2019 at 1:40 pm

    Can you omit the floorplan when in vr mode?

  • Leave a Reply