This article is part three of a multi-part set. In this article, we'll use the model we created in the previous article, and tune up its web presentation. In particular, we will focus on object dimensions, centering, and shadows.

In the Attachments section, to the right, you will find two master models:

BallInBox3a.XMM is the model we're starting with
BallInBox3b.XMM is the model we end up creating

1) Open the Model

Download the BallInBox3a model from this article's attachments section, and drag it into Strata Live 3D.

2) Adjust Dimensions

Most 3D modeling programs work in arbitrary units that have no particular relationship to real-world units like inches or meters.  The VRML97 format which is usually used for interchange between 3D modeling programs and Strata Live 3D recommends that units of 1 meter be used.  However, this convention is rarely followed.  Therefore, to adjust the dimensions displayed by the measure tool in a web product tour, we need to find the relationship between internal model units and real-world units.

Suppose we know that the Ball in this scene (inside the box) is exactly 8 inches in diameter.  First, we will hide the other objects, so we just have the Ball displayed.  Right Click the Base in the 3D window, and slide the Fade Base control all the way out.  Right Click the Top in the 3D window, and slide the Fade Top control all the way out.  Now we have only the Ball displayed.

Select the Measure tool in the 3D window, and click and drag from the top of the ball to the bottom.  It will show that the current measurement is about 30 inches.

Select the Edit > Dimensions menu item.  At the top of the dialog is the overall scaling factor.  Chances are pretty good that you have no idea what this should be!  It gives the relationship between native model units and real-world units.  For example, if you work in a CAD program that models everything in centimeters, and that program just outputs native units to VRML97 exports (which is typical) then the overall scaling should be 1 cm.

More likely, you know the actual size of an object in the scene, and so you can use that to determine scaling.  In this case, we know that the ball is supposed to be 8 inches in diameter.  Change the drop-down at the top of the dialog to use "inch" as the units.  Now set the Height field to exactly 8.

Notices that the other values (width, depth, and overall) changes automatically, to correspond.  Also, notice that the overall scaling has changed to almost exactly 10.0 inches.  Aha!  This model was created with 1 unit equal to 10 inches.  You can adjust the overall scale to be exactly 10.0 inches, and then click OK to lock in the change.

Notice that the measurement in the 3D window changes accordingly, as will measurements in the exported 3D tour.

3) Adjust Aspect

By default, views use a Square Aspect.  This means that all scripting is done with the assumption that the final display window will be roughly square.  If the model is displayed in a non-square box in the final product tour, the 3D scene will be letterboxed, to ensure that everything which was visible in Strata Live 3D is visible in the tour.  This might make the 3D scene a little small, particularly if the scene is not fundamentally square.  This is the case for this product tour.

Although this tour starts with a perfectly square scene, the primary animation (taking the ball out of the box) fits better in a "Landscape" view.  We can change the aspect of views used by the tour to use Landscape, instead of Square, and the final tour will then fit well in a landscape-shaped Applet.

Use the Edit > Change Aspect > Landscape menu item to change the default aspect of the scene.

Then use the Panels > Preview Scripts menu item to bring up the list of scripts defined by this Master Model.  Run the "Init" script to reset to starting state, then the "Ball Out" script.  Notice that the dead space which had been above and below the 3D model is now gone.

While it worked OK to set aspect after scripting for this model, it is usally a much better approach to set aspect before doing any scripting.  This will ensure you do not need to go back and adjust camera settings to ensure everything is displayed as desired.

4) Export Web Tour

Use the Export > Web Tour > Study Scene from Outside menu item to create a web tour.  Select an empty directory to hold the files, and name the output file ballbox.

Your web browser should open automatically and display the tour.  Notice that the measurements are now correct.  There are two things we want to fix in this tour: the box seems smaller than it needs to be, and the shadow looks kind of crummy.

5) Change the 3D Scene Size

Browse to the directory where you stored the web tour.  Find the HTML file, hold down the Shift key, right click on the HTML file, and choose Open With.  Select Wordpad or your favorite text editor.  (Do not select Word, which is the default editor for HTML files on Windows, and is about the worst possible editor for HTML files imaginable.)

Find the line that reads:

scriptButtonsSpace=100;

This tells the user interface to leave 100 pixels of space on the left for the Script control buttons.  This is too much space, given the small button names and short length of the list.  Change this to instead read:

scriptButtonsSpace=0;

Save the file, and view the HTML file with your browser (if your browser is still showing the file, just click the Refresh button).

Notice that the box is now centered over the toolbar, and the letterboxing rule allows it to be much larger, since the landscape aspect closely matches the actual aspect it appears in.

6) Improve the Shadow

Shadows are dynamically generated by the Meson platform.  They are created by rendering the silhouette of the scene in a top-down view onto a low-resolution texture.  When this low-resolution texture is rendered with linear filtering, it achieves a soft shadow effect, without having to do an expensive "convolution" operation.  This generally works very well for real products, but for simple scenes with primitive shapes like this ball and box, the result is not so great.

We will modify the Meson program driving this product tour slightly to improve the look of the shadow.

In your text editor, find the following line in the HTML file:

Shadow.Shadow_3d.alpha=0.75; /* Set to 0.0 for no shadow */

Replace that line with the following:

Shadow.Shadow_3d.alpha=0.25; /* Set to 0.0 for no shadow */
Shadow.Shadow_3d.width=Shadow.Shadow_3d.height=96;
Shadow.Shadow_3d.below=0.001;

The first line controls the alpha (transparency) of the shadow.  By lowering it from 0.75 to 0.25, the shadow is lightened.

The next line sets the width and height of the Shadow to 96x96 pixels.  This results in a sharper, more detailed shadow.

The last line sets the shadow to be just a hair below the bottom of the 3D scene.

Click here to View the final Tour!

7) Save!

You can save the changes you made to the XMM file.  You also might want to make a backup copy of the HTML file you modified, in case you accidentally overwrite it by generating a complete web tour again.

attached files: BallInBox3a.XMM.zip, BallInBox3b.XMM.zip