Initial Considerations

A single 3D View of any given object based on multiple source images can easily be published from within FSI Server’s web interface using the “Publish as FSI Viewer 3D” option. If you like to point out details of a 3D object or if you want to show multiple 3D objects based on individual images, you can easily create FSI Showcase configuration files manually. This tutorial explains the required steps.

You might want to look at the sample configuration file “3dshowcase.xml” below:

<?xml version="1.0" encoding="UTF-8"?>
<fsi_parameter>

      <!-- Other entries removed for demonstration purposes -->

<Images>
            <Image label="360 View">
            <images3d prefix="website/startpage/3d/0" suffix=".tif">
                        <image src="01" />
                        <image src="02" />
                        <image src="03" />
                        <image src="04" />
      <!-- Other entries removed for demonstration purposes -->
                  </images3d>
                  <Options>
                        <InitialAction value="NextScene" />
                        <InitialActionDelay value="8" />
                        <InitialActionPersistent value="true" />
                  </Options>
            </Image>

</Images>

</fsi_parameter>

Within the <Images> node, we declare custom image nodes for each scene we like to present. The Label parameter holds a description, shown in FSI Showcase AddOn. The Images3D Prefix and Suffix are used to build the full Image Path on FSI Server.

With several of such custom image nodes in the .xml configuration file, it’s also possible to add thumbnails for certain scenes in FSI Showcase. Besides that, you can also have a certain spots defined, to point out details of a 3D object in view:

<Image label="Frontlight (Detail)">
                  <images3d prefix="website/startpage/3d/0" suffix=".tif">
                        <image src="01" />
                        <image src="02" />
                        <image src="03" />
                        <image src="04" />
                        <image src="05" />
                        <image src="06" />
                        <image src="07" />
                        <image src="08" />
                        <image src="09" />
                        <image src="10" />
                        <image src="11" />
                        <image src="12" />
                        <image src="13" />
                        <image src="14" />
                        <image src="15" />
                        <image src="16" />
                        <image src="17" />
                        <image src="18" />
                        <image src="19" />
                        <image src="20" />
                        <image src="21" />
                        <image src="22" />
                        <image src="23" />
                        <image src="24" />
                  </images3d>
                  <Options>
                        <InitialView value="1, 18, 0.3967392, 0.39130436, 0.63586957, 0.58967397, 0" />
                  </Options>
            </Image>

In the following FSI Showcase sample we defined 3 Image nodes, each node contains all 12 images found in the samples folder. If you refer to only one image in the other nodes, the ability to rotate the object is disabled.
Note that the 2nd and 3rd node contain the parameter InitialView and no InitialAction.

Sample FSI Showcase instance with custom scenes:

Getting the InitialView Values

Especially with HotSpots for 3D views it’s important to use a quick method to get the value for the “spot” attribute. To do so, please:

  • Open your imagefolder in FSI Server web interface
  • Choose “Publish as FSI Viewer” or “Publish as FSI Viewer 360”
  • In the “Plug-ins” tab, select “SelectFrame”

 

  • Click “Preview”
  • Click the button with the select frame symbol in the FSI Viewer menu bar
    (the rectangular with a dot in each corner)

 


Now you can see a small window in the top-left corner of FSI Viewer. The first tab “Selection” displays the value of your currently marked area.
You can click and drag the semi-opaque white area to move the selection. Use the handles to resize the selection. You will notice that the values in the small window to the top-left change accordingly. Copy and Paste the value shown into your .xml configuration file.
For 3D views the first two numbers of the value change if you rotate the view. You might want to use the “7” and “9” keys on your keyboards “num pad” to rotate the view. This might be more convenient than hiding the select frame (by pressing the “select frame button again”) and rotating the image using the mouse.

Please note that you need to remove any possible “showcase_dir=[folder]” from the code snippets. Otherwise the Image nodes will be ignored.