Skip to main content

3D Distortion Hotspot Images

Learn how to create animated point hotspots using the 3D distortion option found in the settings of the Hotspot Template. In our example, when the mouse enters an active area, the shed doors transition from closed to open. Below, we will outline how to do this.

Download the project files.

1. Create the roll-over effect

The roll-over effect is what is seen when the mouse rolls over the active area.

Mouse over/Roll-over effect

Create the panoramas

  1. Shoot the panorama. Shoot two versions of the panorama. Unless you will have hotspots in every direction, you only need to take one panorama with multiple versions of a direction. In our example, we have one image with the doors closed and another with the doors open.

  2. Stitch the panorama. We use PTGui.

    To make this processes easier, you just need to replace an image. In PTGui,

    1. Save the stitched panorama and then create it. Name it according to its action, i.e. pano_mouse_enter.jpg.

    2. Go to the Source Images tab and select the image to be replaced.

    3. Click, Replace, and add the alternative image.

    4. Create that panorama, naming it something like, pano_mouse_leave.jpg.

Extract a patch

Next, you’ll extract a patch of the area where the changes happen.

  1. Open Pano2VR.

  2. Import the Mouse Enter or Roll Over panorama. In our example, this is the image with the doors open (Mouse Enter).

  3. Add a patch.

    Try to get the area of animation so that it fills the patch.

    ✭ In the next step, you’ll need the patch’s pan and tilt locations. This is embedded in the image’s metadata. However, you can also add this information to the file name of the exported patch:

    1. Go to Pano2VR’s settings/preferences.

    2. Go to the Files tab.

    3. For the Patch’s file path, add the placeholder, $c. So it looks like this: $d/patches/$n_patch_$c. This will tack on the pan, tilt, roll, and fov values to the end of the filename.

  4. Extract the patch.

    • Type is Image.

    • Format is PSD, PNG or TIFF or JPEG (if not blending).

  5. Check the extracted patch’s dimensions.

    ✭ Later, you’ll need to know the patch’s center. So an even number for width and height will work best. If your patch is not even, open the patch and adjust the FoV a few points to achieve the size you want. In our example, our patch is 344x344.

  6. Retouch for blending (this step can be done afterwards, as well). The patch will open in your image editor. When it does, you might want to mask out the hard edge of the image so it blends well.

  7. Save and close this project.

Add a point hotspot

  1. Open a new Pano2VR project and add the mouse up panorama. In our example, this is with the doors closed.

  2. Add a point hotspot.

    You can add it anywhere within the image because in the next step you’ll manually add its location.

  3. Find the patch you extracted in the previous step. And find its pan and tilt values which have been added to the Caption/Description metadata or appended to the filename.

    Patch Location in Metadata

  4. Add the location values to the Point Hotspot. You’ll find the Pan and Tilt parameters, in the point hotspot’s properties.

  5. Save the project.

  6. Open the Output panel and add an HTML5 output.

  7. Open an existing skin or a new skin in the Skin Editor.

  8. Drag in the patch image to the Canvas.

  9. Change its position to X = 0; Y = 0, in the Position panel of the Properties.

  10. Add a hotspot template.

  11. Place the template in the center of the patch image by dividing the patch image’s width in half and enter this number for it’s position. In our example, X = 172; Y = 172.

  12. In the hotspot template’s properties, enable 3D Distortion.

  13. Set the template’s distance using this formula: panorama width / 2 / 3.1415. For example, 6000/2/3.1415 = 954.9.

    3D Distortion settings

  14. Make the patch image a child of the hotspot template.

2. Create an active area

Because the image is a hotspot, you can’t click and drag in this portion of the panorama, yet. We also don’t want the image to show all the time; only when the mouse rolls over the door. To fix this, we need to create an active area.

In the skin editor:

  1. Select the image and in its Appearance panel, set Alpha to 0.

  2. Draw a rectangle over a portion of the hotspot image. This is the active area.

  3. Set the rectangle’s Alpha to 0.005.

  4. Make the rectangle a child of the template and keep it above the hotspot image, and therefore in front of the image.

  5. Add the following actions to the rectangle:

Source Action Target
Mouse Enter Change Element Alpha; Alpha = 1 patch image
Mouse Leave Change Element Alpha; Alpha = 0 patch image

Blend the patch image

The patch image might differ from the panorama and therefore needs to be blended to match. There are a few ways to do this so we’ll go over some.

Using PNG

Using the PNG format will generate a large file size. This would not be ideal if the project already contains a lot of elements.

  1. Open the patch in an image editing software (Photoshop).

  2. Add a layer mask.

  3. Blend out (erase) the edges using the brush tool.

  4. Save as PNG-24. (File > Save for Web).

  5. Open the Pano2VR project (from above).

  6. Open its skin.

  7. Select the patch image.

  8. In the image properties, click Change… to replace the image. Select the updated patch image. Make sure Format is set to PNG.

  9. Save the project and re-output.

Using JPEG

For a smaller file size, use JPG for the blended rollover image. Here, you’ll extract two patches for the two “states”.

  1. Open the working project (the mouse up project).

  2. Add a patch.

  3. Enter the position details of the original patch (i.e. doors open image).

  4. Extract the patch.

    There should now be two patch images. One for the mouse up and one for the roll over (or mouse enter).

  5. Open this new patch (mouse up) in Photoshop (or your favorite editor).

  6. Drag the roll over patch on top of the mouse up patch (the new one) and line it up.

  7. Mask out the edges of the upper later (mouse enter).

  8. Save as a JPEG.

  9. Replace the old patch in the skin using the same steps as for PNG. Just make sure the image output is set to JPEG.

Load them externally

  1. Open the skin (the same one that’s been used in all previous steps).

  2. Add an External Image.

  3. Change its position to X = 0; Y = 0.

  4. Change its size to match the patch image. (In our example it would be 344x344)

  5. Change its ID to match the patch image. (We used the default ID of Image 1.)

  6. Make the External Image a child of the Hotspot Template.

  7. Move the rectangle up the tree so it’s above the external image.

  8. Remove the patch image. The external image is now taking the place of the patch image.

  9. Select the external image and change its Alpha to 0 in the Appearance section.

  10. In the External Image section, define its URL. Enter the file name of the roll over (mouse enter) patch image. For example, rollover.jpg.

  11. Save the skin.

  12. Output the project.


See also

2018-02-20 14:33:36