WF GettingStarted II

Tutorial
Getting Started
Volume II: 3D Tutorial
Contents
INTRODUCTION.......................................................................................................................... 1
REQUIREMENTS ........................................................................................................................ 1
User Requirements ............................................................................................................. 1
System Requirements......................................................................................................... 1
RESOURCE FILES ...................................................................................................................... 1
GENERAL WORKFLOW ............................................................................................................... 2
PHOTOS ................................................................................................................................... 5
3D MODELING IN 3DS MAX ........................................................................................................ 6
Image Reference ................................................................................................................ 6
Polygon Modeling ............................................................................................................... 8
Materials............................................................................................................................ 18
Animations ........................................................................................................................ 21
Export................................................................................................................................ 22
WIREFUSION .......................................................................................................................... 25
Import the 3D model ......................................................................................................... 25
Tuning of the 3D model.....................................................................................................26
Interface ............................................................................................................................ 33
Navigation ......................................................................................................................... 35
Reset Camera ...................................................................................................................39
Touch Sensors..................................................................................................................40
Animations I Simple Logic.............................................................................................. 42
Animations II Advanced Logic ....................................................................................... 43
Adding Hotspot Labels...................................................................................................... 47
Publish .............................................................................................................................. 54
HTML EDITING IN DREAMWEAVER ........................................................................................... 57
SUMMARY ...............................................................................................................................59
Introduction
Introduction
Welcome to Getting Started, Volume II. This tutorial will guide you through the entire process of creating a WireFusion Web3D presentation - from 3D modeling to a final presentation
running on the web. We will create an interactive product presentation of a tape rule, which
will contain e.g. object animations, touch sensors, user interface and real-time shadows.
The 3D modeling part in this tutorial is quite brief, as it is expected that you are already familiar with 3D modeling.
Requirements
User Requirements
This tutorial requires that you are familiar with 3D modeling, using either Autodesk 3ds Max,
or any other 3D authoring tool capable of exporting to X3D or VRML (VRML2/VRML97). It is
also highly recommended that you work through the WireFusion tutorial Getting Started,
Volume I, in which you will learn the basics of WireFusion.
System Requirements
You will need the following tools in order to complete this tutorial:
A 3D authoring tool capable of exporting to X3D or VRML (VRML2/VRML97). In this tutorial we use Autodesk 3ds Max 7.
A graphics software that can save pictures in JPEG, transparent GIF and transparent
PNG. In this tutorial we use Adobe Photoshop.
Any edition of WireFusion 4.1.12 (or later).
An HTML editor and FTP client. In this tutorial we use Macromedia Dreamweaver.
Resource Files
The resource files for this tutorial can be found in:
[WireFusion Path]/resources/tutorials/tape_rule/
Getting Started Volume II: 3D Tutorial
General Workflow
The general workflow for this tutorial is:
1. Take photos of the tape rule (Figure 1).
Figure 1: Taking photos of the tape rule
2. Model,
texture and animate the tape rule in Autodesk 3ds Max. Export from 3ds Max to
VRML (Figure 2).
Figure 2: Modeling of the tape rule
General Workflow
3. Import
the 3D (VRML) model to WireFusion. In WireFusion, tune the 3D model and its behaviors, create interactivity and export the presentation as a Java Applet (Figure 3).
Figure 3: Adding interactivity and publishing from WireFusion
4. Edit
HTML page with Macromedia Dreamweaver. Upload to web server (Figure 4).
Figure 4: Editing and uploading in Dreamweaver
5. Test
online in a web browser (Figure 5).
Figure 5: Testing in the browser
Photos
Photos
To create a nice realistic 3D model from a real physical object, we generally start by taking
pictures of the object (Figure 1). We then use these pictures for the following purposes:
As reference images in the 3D authoring tool while modeling. We take photos from the
Front, Top, Back, Bottom, Left and Right views. Possibly also from different object configurations.
As textures that we apply on the 3D model.
NOTE: The picture quality should be as good as possible, which means no barrel distortion and as little reflections as possible. In order to capture small objects and details, and to get sharp pictures, we recommend
using a macro lens. All the photos should be taken in the same light conditions. Image quality is a key factor
for a good result.
3D Modeling in 3ds Max

NOTE: If you want to skip the 3D modeling part you can go directly to the WireFusion section and load a
ready-made model. If you want to examine the final MAX file in 3ds Max, then load the following:
[WireFusion Path]/resources/tutorials/tape_rule/tape_rule.max
Image Reference
In order to build the 3D model as exact as possible, we will use reference images of the tape
rule as background images. However, rather than using the built-in Viewport Background
function, found in 3ds Max, we will use another method instead:
1. From
the Create panel, create a Box primitive.
2. Press
M to open the Material Editor, and then load 'help-1-1.jpg' as diffuse material
(Figure 6).
[WireFusion Path]/resources/tutorials/tape_rule/help-1-1.jpg
Figure 6: Loading a reference image
3. To
display materials on the surfaces in the viewports, choose Material Editor > Material >
Select Map in Viewport
4. With
the box selected, click the Assign Material to Selection button.
In the Modify panel, edit the size of the box. Set Width to 512 and Length to 415.
NOTE: In order to have no distortion, the box should have the same size (proportions) as the picture, i.e.
512x415.
5. Convert
the box to polygon by right clicking the box, then choose Convert to: Convert to
Editable Poly
6. Erase
all faces, except the front face (Figure 7).
Figure 7: Erasing faces
7. Create
four quad reference images in total; for the Front View, the Back view, the Left view
and the Right view. Load 'help-2-1.jpg', 'help-3-1.jpg' and 'help-4-1.jpg'. For each quad,
the tape rule should have the same dimensions.
8. Select
all the quads. In the Display panel, unmark the Show Frozen in Gray checkbox.
9. Open
the Layers window, and add a new layer by choosing Create New Layer. Rename
the layer to 'references' and click on Freeze (Figure 8). Now the reference images cannot
be selected nor moved.
Figure 8: Freezing the quads in a layer
Polygon Modeling
1. Select
the Front View viewport and click on the Min/Max Toggle button (or press
ALT+W).
2. Most
objects can be built from a box primitive. However, in this case we will start with a
cylinder primitive. Create a Cylinder with only one height segment and 18 sides.
3. Press
9).
ALT+X to make the cylinder translucent, and press F4 to display the edges (Figure
Figure 9: A translucent cylinder with edges
4. Convert
the cylinder to Poly. With the help of the reference image, build the front side of
the tape rule by moving the vertices (Figure 10).
Figure 10: Vertices moved to fit the reference image
5. Bevel
the front side and the backside of the tape rule, and arrange the vertices positions
(Figure 11).
Figure 11: Bevel the front side
6. Use
the Slice Plane command to cut the faces (Figure 12).
Figure 12: Cutting faces with the Slide Plane
10
7. Extrude
the faces, and move the points to get the look in Figure 13.
Figure 13: Extruding faces
8. To
create a hole for the button, we connect edges together. Then Chamfer the new
edges and finally Bevel the built surface (Figure 14).
Figure 14: Creating the hole for the button
11
9. Extrude
to create the cut in the shell, as seen in Figure 15.
Figure 15: Extruding polygons
10.Create
the belt clip on the backside of the tape rule from an extruded Line. Use the Shell
command to automatically generate the width of the belt clip (Figure 16).
Figure 16: Creating the belt clip
TIP: Useful commands to create the geometry are Edge Chamfer, Edge Connect and Bevel.
12
11.Use
the FFD (Free-Form Deformation) command to transform the belt clip (Figure 17). We
will use an alpha map later on to simulate the holes in the belt clip.
TIP: Try not to use Boolean operations to create holes. It generally creates non-smooth surfaces.
Figure 17: Free-Form Deformation
12.Create
the button/lock of the tape rule as a separate object (Figure 18). Start with a Box
primitive and then deform it.
13
Figure 18: Creating the button/lock
13.To
create the cord, use Splines > Line (Figure 19) Then use Extrude and Shell to deform
it.
Figure 19: Creating the cord using a line spline
14.We
are almost finished with the geometry process. Control the polygon counts, by choosing Utilities panel > Polygon Counter (Figure 20). The default polygon budget in 3ds Max
is 10.000 polygons, which is a good guideline for Web3D presentations created with WireFusion.
14
Figure 20: Using the Polygon Counter to control the number of polygons used
15.The
tape is created from a modified Box, while the end of the tape is created from Cylinders and a multi-extruded Box (Figure 21).
Figure 21: Creating the tape
15
16.When
assigning NURMS Subdivision, there are a lot of artifacts (Figure 22). To fix the
artifacts, use the Separate by Smoothing Groups. In the Smoothing Groups panel, assign the same number to faces belonging to the same surface.
Figure 22: NURMS Subdivision with artifacts
After assigning the Smoothing Groups correctly you should get a result similar to Figure 23.
Figure 23: Smoothing groups assigned
16
The fact that we applied NURMS Subdivision has doubled the triangle count of the scene.
We now have about 4 300 polygons in the scene. However, we are still in our initial budget,
which is 10 000 polygons (Figure 24).
Figure 24: 4 300 polygons and smooth result
17
Materials
Even though WireFusion is not limited to any specific texture size, you should always keep in
mind that texture maps should be as small as possible. Large textures will slow down the
presentation and increase initial startup time. WireFusion has no upper limit for the dimensions of the texture maps either, but we recommend using the power of 2, e.g. 512X128,
256x256 etc. This rule generally improves memory allocation, and speeds up the presentation.
Figure 25: Creating a texture map of 512x128 in Adobe Photoshop
1. Use
UVW Map or UnWrap UVW to arrange the position of the textures (Figure 26).
Figure 26: Using UVW Mapping
2. Instead
of making a hole in the geometry of the belt clip, we will use a transparent texture
map (Figure 27). Save the file as a transparent PNG-8 (8-bits) file (PNG-24 generates too
18
big files). The WireFusion 3D engine supports both Bilinear Filtering and MIP Mapping to
improve the texture rendering, so even low quality alpha channels can be well rendered.
Figure 27: Using an alpha map to simulate holes
TIP: You should always keep the original textures (in Photoshop PSD format) in case you have to change or
modify them in WireFusion later on.
3. You
can display (preview) the alpha channel in 3ds Max by using both the Diffuse and
Opacity channels. In the Opacity > Bitmap Parameters menu, select Mono Channel
Output > Alpha.
4. Use
the Multi/Sub-Object Material to assign different textures to the different faces of the
tape rule (Figure 28).
19
Figure 28: Using Multi/Sub-Object Material
20
Animations
We will animate three elements in the scene using the Auto Key function; we will animate the
button, the belt clip and the tape.
1. To
create an animation, click the Auto Key button. Change the current frame on the Time
Slider, then transform the object you want to animate (Figure 29).
Figure 29: Using Auto Key for animations
2. The
button object is a simple translation, while the belt clip is a vertex animation.
3. For
the tape animation we want both the tape object and the tape end object to be
animated. Instead of having two separate animations we link the objects together. We
make the tape object a Parent to the tape end object, which becomes a Child. To link the
objects, use the Select and Link function (Figure 30). When you move the parent object,
then the child object follows. If you move the child, then the parent is not affected.
21
Figure 30: Linking the tape and the tape end as child and parent
Export
1. Before
exporting the final model, we center the objects according to the origin of the coordinates, also known as Center of the Universe in 3ds Max (Figure 31).
Figure 31: Center the model
22
2. Rename
the objects in your model to meaningful names. It will make it easier when working
in WireFusion.
NOTE: We are not using light sources in this project. We will use reflection maps in WireFusion instead.
3. Add
a Target Camera to your scene and position the target in the Center of the Universe
(Figure 32). This camera will be the default camera used in WireFusion later on.
Figure 32: A Target Camera added to the scene
4. To
export the model, choose File > Export. Choose VRML97 as file type. Save the VRML
file in the same folder as the textures.
5. In
the VRML97 Exporter dialog (Figure 33), mark the Normals checkbox (to export the
smoothing groups informations) and the Coordinate Interpolators checkbox (to export the
belt clip animation). Unmark all the other parameters, and click OK.
23
Figure 33: VRML 97 Exporter dialog
Now the VRML file has been exported and it is time to start working in WireFusion.
24
WireFusion
WireFusion
Import the 3D model
Now it is time to launch WireFusion. You can optionally keep 3ds Max open, as it is possible
to re-import the 3D scene in case you would need to modify the original scene in 3ds Max.
1. From
Objects > 3D, insert a 3DScene object into the Script Area (Figure 34).
Figure 34: Inserting a 3DScene object
2. When
dropping the object you have to choose what type of 3D model you intend to import;
either a 3D Object (Examine mode) or a 3D World (Walk mode). From the 3D Type dialog,
choose 3D Object and click OK (Figure 35).
Figure 35: Choosing the type of 3D model to load
3. Load
the VRML file 'tape_rule.wrl':

[WireFusion Path]/resources/tutorials/tape_rule/tape_rule.wfp
25
Tuning of the 3D model

When the 3DScene dialog opens, you will find a Preview window in the middle of the dialog
containing your 3D model (Figure 36).
NOTE: If you do not see anything in the Preview window, then you probably have not added a camera in 3ds
Max before exporting. WireFusion has then automatically added a default camera for you, which is positioned
in 0,0,0. Therefore, you would have to zoom out in order to see the whole model. In the Camera panel, after
you have zoomed out, you can set the new position.
Figure 36: 3DScene dialog opened
4. In
the toolbar, set the Target Area size for the 3DScene object (and Preview window size).
Set the Width to 400 and Height to 400 (Figure 37).
Figure 37: The 3DScene toolbar
5. In
the Navigation panel > Navigation Speed, set Zoom and Pan speed to 4, and the Friction slider to 30 (Figure 38). To test the settings, try navigating in the Preview window using the mouse.
26
WireFusion
Figure 38: Navigation settings
6. In
the Rendering panel > Renderer, from the drop down menu, choose Reflection as renderer type. Then load and use 'ref4.jpg' as Reflection Map (Figure 39).
[WireFusion Path]/resources/tutorials/tape_rule/ref4.jpg
Figure 39: Choosing renderer
27
7. A
nice feature in WireFusion is the real-time shadows. To add shadows to your scene, in
the Rendering panel > Shadow, mark the Shadow On checkbox. Then make the following settings for the shadows (Figure 40):
Opacity = 70
Blur = 5
Quality = 3
Height Intensity = 10
Light Source > Height = 1400
Light Source > X Position = 1500
Light Source > Z Position = 3000
Shadow Plane > Height = 0
Shadow Plane > Size = 2500
Figure 40: Adding real-time shadows to the scene
8. In
order to work with an object and to change settings for it you first have to select the object. In the Objects view, select the object 'belt_clip_0' (Figure 41).
28
WireFusion
Figure 41: Selecting an object from the Objects view
9. When
the object is selected, in the Object panel, change the Glossiness value to 90
(Figure 42). This will increase the reflection on the belt clip.
Figure 42: Setting the glossiness value
10.For
the 'belt_clip_1' object, set the Glossiness value to 50. We choose a lower reflection
on the inner side of the belt clip.
11.To
avoid that a user zooms in too much, i.e. so that the inside of the tape rule can be
seen, we can set camera restrictions for a selected camera. In the Cameras view, select
'Camera01' (Figure 43).
29
Figure 43: Selecting a camera
12.In
the Preview window, zoom-in the tape rule so that it covers the window as seen in
Figure 44.
Figure 44: Zooming in
13.Without
changing anything in the Preview window, in the Camera panel > Zoom-In Stop,
click the Set button (Figure 45).
30
WireFusion
Figure 45: Setting the zoom-in stop
14.In
the Preview window, zoom-out the tape rule as seen in Figure 46.
Figure 46: Zooming out
15.Without
changing anything in the Preview window, in the Camera panel > Zoom-Out
Stop, click the Set button.
16.By
default, all animations in the 3D scene will automatically start, and loop. To turn off the
auto-run, we first have to select all the animations. In the Animations view, select all animations (Figure 47).
31
Figure 47: Selecting all animations in the Animations view
17.
In the Animation panel, unmark the Loop at Startup checkbox (Figure 48).
Figure 48: The Animation panel
NOTE: You can at any time re-import the 3D model (the VRML file). This is useful e.g. if you have made
changes or adjustments in 3ds Max. To do this, click the Replace button in the toolbar. In most situations the
Replace function preserves all the parameters, but if you create new Multi/Sub Object materials the Replace
function will not operate correctly. In those cases, uncheck the Keep old Object settings.
We are ready for now in the 3DScene dialog. Click the OK button at the bottom of the dialog to close it. Position the 3DScene Target Area in (0,0). This is done in the Properties
view > Target Area (Figure 49)
18.
Figure 49: Setting X and Y position
32
WireFusion
Interface
We will now set up the basic look and interface for our presentation.
1. The
presentation shall have a window of 400x450 pixels. Choose Project > Properties
from the program menu. Set the Stage Width to 400 and the Stage Height to 450. Also,
set the Frame Rate (fps) to 15 (Figure 50).
NOTE: Setting the frame rate to 15 means that the presentation will try to playback at a maximum of 15
frames per second. The reason for this value is that 15 frames per second is normally sufficient for a 3D
presentation like the one in this tutorial, and using a higher value will only consume unnecessary CPU time.
Figure 50: Scene Properties dialog
2. In
Adobe Photoshop, create a user interface for the 3D presentation. We have used a
transparent PNG (24-bit) to get smooth results (Figure 51).
33
Figure 51: Creating user interface in Photoshop
3. In
WireFusion, insert an Image object. Load the user interface image 'nav.png':
[WireFusion Path]/resources/tutorials/tape_rule/nav.png
4. Rename
'Image 1' to 'Navigation' and position the image in (0,294) (Figure 52).
Figure 52: Navigation image inserted
34
WireFusion
5. Insert
an Image object. Load the background image 'background.png':

[WireFusion Path]/resources/tutorials/tape_rule/background.png
6. Rename
'Image 1' to 'Background' and position the image in (0,0).
7. Reorder
the layers in the Layers view. Position the 'Background' in the bottom layer. Unmark the Activate checkbox and mark the Stamp Background checkbox (Figure 53).
Figure 53: Changing the layer order
NOTE: The Background image will be static in your presentation and will not cover any moving graphics.
Therefore you will save CPU time and increase the performance by deactivating the image and by stamping
it in the background.
Navigation
We normally use the mouse for navigating a 3D scene. However, in this presentation will give
the user the option to use navigation buttons for rotating the scene.
TIP: Remember to save your project from time to time.
1. From
the Objects > Widgets folder, insert a Button object. When the Button dialog opens,
mark the Advanced Mode checkbox. This allows you to load your own button graphics. In
the Up panel, click the Change Graphics button and load 'up1.png' (Figure 54):
[WireFusion Path]/resources/tutorials/tape_rule/up1.png
35
Figure 54: The Button dialog
2. Still
in the Button dialog, in the Down panel, mark the Enable checkbox. Click the Change
Graphics button and load 'up2.png' (Figure 55). Click OK to close the Button dialog.
Figure 55: The Button dialog
3. Rename
'Button 1' to 'Up'.
4. Insert
a second Button object. In the Up panel, load 'down1.png'. In the Down panel, load
'down2.png'. Click OK to close the dialog.
5. Rename
'Button 1' to 'Down'.
6. Insert
a third Button object. In the Up panel, load 'left1.png'. In the Down panel, load
'left2.png'. Click OK to close the dialog.
7. Rename
36
'Button 1' to 'Left'.
WireFusion
8. Insert
a fourth Button object. In the Up panel, load 'right1.png'. In the Down panel, load
'right2.png'. Click OK to close the dialog.
9. Rename
'Button 1' to 'Right'.
10.Insert
a fifth Button object. In the Up panel, load 'reset1.png'. In the Down panel, load 'reset2.png'. Click OK to close the dialog.
11.Rename
'Button 1' to 'Reset'.
12.Insert
a sixth Button object. In the Up panel, load 'labels1.png'. In the Down panel, load
'labels2.png'. Click OK to close the dialog.
13.Rename
14.Position
'Button 1' to 'Labels'.
the Target Areas for the Button objects as follows (Figure 56):
'Up' at X:39 and Y:389
'Down' at X:39 and Y:423
'Left' at X:21 and Y:407
'Right' at X:55 and Y:407
'Reset' at X:100 and Y:395
'Labels' at X:164 and Y:390
Figure 56: Button objects re-positioned
15.Connect
(Figure 57):
'Up' > Out-ports > Button Clicked

to
'3D Scene 1' > In-ports > Navigation > Rotate > -X
37
'Down' > Out-ports > Button Clicked

to
'3D Scene 1' > In-ports > Navigation > Rotate > X
'Left' > Out-ports > Button Clicked

to
'3D Scene 1' > In-ports > Navigation > Rotate > -Y
'Right' > Out-ports > Button Clicked

to
'3D Scene 1' > In-ports > Navigation > Rotate > Y
TIP: Remember to use the Wire Creator when connecting objects. It speeds up the wiring process a lot.
Figure 57: Button objects connected to the 3DScene object
16.For
each navigation button; 'Up', 'Down', 'Left' and 'Right', in the Properties view, set the
Repeat rate to 50 (Figure 58). This means that the Button object will send out 50 events
per second when the button is clicked (and held). Change this value if you want to adjust
the rotation speed.
38
WireFusion
Figure 58: Setting the button repeat rate
17.Press
F7 to preview the presentation. You should now be able to use the navigation buttons to rotate the tape rule.
Reset Camera
We want to be able to reset the camera view in our presentation. There is an option in WireFusion that allows you to have a glide (animation) from the current view to a preset camera
view.
1. Open
the 3DScene dialog. Select 'Camera01' in the Cameras view, then open the Camera
panel. In the Camera Animation section, set the Speed to 1500 (Figure 59). Click OK to
close the 3DScene dialog.
Figure 59: Setting the camera animation speed
NOTE: The camera animation speed, i.e. the speed with which the camera glides from the current view to a
predefined view, depends on the size of your 3D scene. Therefore you might get different results on different
3D scenes, and you might need to try your way out.
39
2. Connect
(Figure 60):
'Reset' > Out-ports > Button Clicked

to
'3D Scene 1' > In-ports > Camera > Set ''Camera01''
Figure 60: Reseting the camera view
3. Press
F7 to preview the presentation. You should now be able to reset the camera by clicking the Reset button.
Touch Sensors
Our 3D scene contains animations and we will trigger those animations by clicking on touch
sensors. Any object (shape) in your 3D model can be configured to be a touch sensor. This is
done in the 3DScene dialog. In our presentation we will have three touch sensors; the belt
clip, the button, and the tape end.
1. Open
the 3DScene dialog. Select 'belt_clip' in the Objects view, then open the Object
panel. Mark the Show Touchsensor Ports checkbox and the Enable Touchsensor
checkbox (Figure 61).
Figure 61: Making a touch sensor of the belt clip shape
40
WireFusion
2. Select
'button' in the Objects view, then open the Object panel. Mark the Show Touchsensor Ports checkbox and the Enable Touchsensor checkbox.
3. Select
'tape_end' in the Objects view, then open the Object panel. This time, mark only
the Show Touchsensor Ports checkbox, and not the Enable Touchsensor checkbox
(Figure 62). Click OK to close the 3DScene dialog.
Figure 62: Making a touch sensor of the tape_end shape
New in- and out-ports, for the newly created touch sensors, will now be available in the
3DScene object (Figure 63). Both the 'belt_clip' and the 'button' touch sensors are enabled
at presentation startup, while the 'tape_end' touch sensor is disabled.
Figure 63: New touch sensor out-ports added
41
Animations I Simple Logic

In the previous section we created touch sensors, which we will use to trigger our animations
with. In this first animation section we will trigger and run the belt clip animation using a rather
simple logic.
The logical scheme looks like this:
Click the 'belt_clip' touch sensor with the mouse, which triggers a Progressor object to
run.
The Progressor object runs and counts from 0 to 100 in 1 second.
The numbers (0-100) from the Progressor is sent to the 3DScene object and runs the
animation.
1. From
the Objects > Logic folder, insert a Progressor object. When the Progressor dialog
opens, mark the Advanced Mode checkbox. Keep the default values, but change the At
Startup option to Do nothing, and select the third Output Curve option by marking its radiobutton (Figure 64).
Figure 64: Progressor dialog
2. Rename
'Progressor 1' to 'Run belt_clip animation'.
3. Connect
(Figure 65):
'3D Scene 1' > Out-ports > Touch Sensors > ''belt_clip_0'' > Mouse Press
to
'Run belt_clip animation' > In-ports > Run
'Run belt_clip animation' > Out-ports > Progress [Number]

to
'3D Scene 1' > In-ports > Animations > ''belt_clip-TIMER'' > Set Animation Fraction [Number]
42
WireFusion
Figure 65: Logics for running the belt clip animation
4. Press
F7 to preview the presentation. Clicking the belt clip will now trigger the animation to
run.
Animations II Advanced Logic

In this second animation part we will create a more advanced logic for how the other animations should be triggered, and, how and when they should run.
The logical scheme looks like this:
Clicking the 'button' touch sensor with the mouse will (1) trigger a first Progressor object
to run, and, (2) disable the 'button' touch sensor.
The numbers (0-100) from the Progressor are sent to the 3DScene object, which will run
the 'button' animation.
When the Progressor has finished, it will start and run a second Progressor that also
counts from 0 to 100 in 1 second.
The numbers (0-100) from the second Progressor is sent to the 3DScene object, which
will run the 'tape' animation.
When the second Progressor has finished, it will enable the 'tape_end' touch sensor.
NOTE: It is not possible to click the 'button' touch sensor at this stage, as it has been disabled. However, the
'tape_end' touch sensor has now been enabled and can be clicked.
Clicking the 'tape_end' touch sensor with the mouse will (1) trigger a third Progressor
object to run, and, (2) disbable the 'tape_end' touch sensor.
The numbers (100-0) from the Progressor are sent to the 3DScene object, which will run
the 'tape' animation backwards.
When the Progressor has finished, it will start and run a fourth Progressor that also
counts from 100 to 0 in 1 second.
43
The numbers (100-0) from the fourth Progressor is sent to the 3DScene object, which will
run the 'button' animation backwards.
When the fourth Progressor has finished, it will enable the 'button' touch sensor.
1. Insert
two Progressor objects. For both Progressor objects, keep the default values, but
change the At Startup option to Do nothing.
2. Rename:
'Progressor 1'
to
'Run button animation - up'
'Progressor 2'
to
'Run tape animation - in'
3. Connect
(Figure 66):
'3D Scene 1' > Out-ports > Touch Sensors > ''button'' > Mouse Press
to
'Run button animation - up' > In-ports > Run
'3D Scene 1' > Out-ports > Touch Sensors > ''button'' > Mouse Release
to
'3D Scene 1' > In-ports > Touch Sensors > ''button'' > Disable
'Run button animation - up' > Out-ports > Progress [Number]

to
'3DScene 1' > In-ports > Animations > ''button-TIMER'' > Set Animation Fraction [Number]
'Run button animation - up' > Out-ports > Finished

to
'Run tape animation - in' > In-ports > Run
'Run tape animation - in' > Out-ports > Progress [Number]

to
'3D Scene 1' > In-ports > Animations > ''tape-TIMER'' > Set Animation Fraction [Number]
'Run tape animation - in' > Out-ports > Finished

to
'3D Scene 1' > In-ports > Touch Sensors > ''tape_end'' > Enable
44
WireFusion
Figure 66: The first animation part
5. Press
F7 to preview the presentation and test what you have accomplished so far. Clicking
the button will trigger the animations to run.
6. Insert
two more Progressor objects. For both Progressor objects, in the dialogs, change the
Start Value to 100, and the Stop Value to 0. Change the At Startup option to Do nothing.
7. Rename:
'Progressor 1'
to
'Run button animation - down'
'Progressor 2'
to
'Run tape animation - out'
8. Connect
(Figure 67):
'3D Scene 1' > Out-ports > Touch Sensors > ''tape_end'' > Mouse Press
to
'Run tape animation - out' > In-ports > Run
'3D Scene 1' > Out-ports > Touch Sensors > ''tape_end'' > Mouse Release
to
'3D Scene 1' > In-ports > Touch Sensors > ''tape_end'' > Disable
'Run tape animation - out' > Out-ports > Progress [Number]

to
'Run tape animation - out' > Out-ports > Finished

to
'Run button animation - down' > In-ports > Run
45
'Run button animation - down' > Out-ports > Progress [Number]

to
'3DScene 1' > In-ports > Animations > ''button-TIMER'' > Set Animation Fraction [Number]
'Run button animation - down' > Out-ports > Finished

to
'3D Scene 1' > In-ports > Touch Sensors > ''button'' > Enable
Figure 67: The animation logic ready
9. Press
F7 to preview the presentation. Try first to click the button, which will release the lock
and have the tape moving in. Then, try to click the end of the tape, which will move the tape
out again and then lock it by moving the button down.
46
WireFusion
Adding Hotspot Labels

We will point out the hotspots (the touch sensors) in our presentation and will briefly describe
what they do by showing a label next to them (Figure 68).
Figure 68: Hotspot labels added
1. Double
click the 3DScene object to open its dialog. In the Camera panel, add a new camera by clicking the Add Camera button. Name the new camera to 'Labels' (Figure 69).
Change the Camera Animation > Speed to 3000. Click OK to close the dialog.
NOTE: The added camera will get the same settings as the default camera, or the camera that is currently
selected in the Cameras view when clicking the Add Camera button.
Figure 69: New camera added, named 'Labels'
47
2. Insert
an Image object. Load the image 'arrows.png':

[WireFusion Path]/resources/tutorials/tape_rule/arrows.png
3. Rename
'Image 1' to 'Arrows', position the image in (0,0) and disable it by unmarking the
Activate checkbox in the Layers view (Figure 70).
Figure 70: Deactivating 'Arrows' at presentation startup
4. Insert
a Dummy object, a Number object and a Progressor object. In the Progressor dialog,
mark the Advanced Mode checkbox, set the Time Interval to 8 seconds and select the
third Output Curve option by marking its radiobutton.
5. Rename
(Figure 71):
'Number 1'
to
'Reset animations'
'Progressor 1'
to
'Fade in/out'
Figure 71: Objects inserted and renamed
48
WireFusion
6. When
the Labels button is clicked, send a pulse to the Dummy object.
Connect (Figure 72):
'Labels' > Out-ports > Button Clicked

to
'Dummy 1' > In-ports > Push Pulse
NOTE: The Dummy object works as a repeater, and only passes on the pulse coming from the Button object.
We could optionally have connected the Button object directly to the other objects if we wanted, but the benefit of using the Dummy object in between is that we can then trigger the same function from elsewhere.
Figure 72: Sending a pulse to the Dummy object
7. From
the Dummy object, have the 'Arrows' image activated and faded in.
'Dummy 1' > Out-ports > Pulse Pushed

to
'Arrows' > In-ports > Activate

to
'Fade in/out' > In-ports > Run
'Fade in/out' > Out-ports > Progress [Number]

to
'Arrows' > In-ports > Set Opacity [Number]
Figure 73: Activating and fading in the Image object
49
8. When
the 'Arrows' image has been faded out, disable the Image object.
'Fade in/out' > Out-ports > Finished

to
'Arrows' > In-ports > Deactivate
Figure 74: Deactivating the Image object
9. From
the Dummy object, reset all the animations (i.e. set the animation fraction to 0).

to
'Reset animations' > In-ports > Push Value
'Reset animations' > Out-ports > Value Pushed [Number]

to
'3D Scene 1' > In-ports > Animations > ''button-TIMER'' > Set Animation Fraction [Number]

to
'3D Scene 1' > In-ports > Animations > ''belt_clip-TIMER'' > Set Animation Fraction
[Number]

to
50
WireFusion
Figure 75: Resetting the animations
10.From
the Dummy object, set the 'Labels' camera.

to
'3D Scene 1' > In-ports > Camera > Set ''Labels''
Figure 76: Switching camera view
51
11.From
the Dummy object, disable the 3D navigation by switching to Interact mode.

to
'3D Scene 1' > In-ports > Navigation > Mode > Set Interact
NOTE: Interact mode is normally used when interacting with a texture containing interactions. When choosing Interact mode the normal 3D navigation, using the mouse, is turned off.
Figure 77: Switching to Interact mode
12.From
the Dummy object, reset the touch sensors to their initial states.

to
'3D Scene 1' > In-ports > Touch Sensors > ''button'' > Enable

to
'3D Scene 1' > In-ports > Touch Sensors > ''tape_end'' > Enable
52
WireFusion
Figure 78: Resetting the touch sensors
13.When
the 'Arrows' image has been faded out, set the 'Camera01' camera.

to
'3D Scene 1' > In-ports > Camera > Set ''Camera01''
Figure 79: Setting the default camera
14.When
the 'Arrows' image has been faded out, enable the 3D navigation again by switching back to Normal mode.

to
'3D Scene 1' > In-ports > Navigation > Mode > Set Normal
53
Figure 80: Switching back to Normal navigation mode
15.Press
F7 to preview the presentation. Click the Labels button to test the newly added func-
tion.
16.Press
CTRL+F7 to preview the presentation in your default web browser. Make sure all
function and features are working.
Publish
We are ready with our presentation and will now publish it. We have different options for publishing a WireFusion presentation, however, in this tutorial we will publish it as a Java Applet,
as we want it to run on a web page.
1. Choose
File > Publish
2. When
the Publish dialog opens, choose a name for the presentation and a folder to publish
it to. Choose the name 'My_tape_rule' (Figure 81).
Figure 81: Choosing name and location to publish the presentation
3. Make
sure the Format is set to Java Applet. You can optionally also mark the Download
Java Plug-in if Java is missing checkbox (Figure 82).
54
WireFusion
Figure 82: Publishing the presentation as a Java Applet
NOTE: You can optionally choose to encrypt your resources by marking the Encrypt resource file option.
This prevents other users from stealing your resources. Not available in the Standard edition.
4. Change
the default loading graphics by marking the Custom Loader Graphics checkbox
(Figure 83). Change the default Progress Bar Graphics, by clicking the Change button.
Load the image 'loading_bar.gif':
[WireFusion Path]/resources/tutorials/tape_rule/loading_bar.gif
NOTE: The Custom Loader Graphics option is not available in the Standard edition.
5. Change
the default Background Graphics, by clicking the Change button. Load the
image 'loading_background.gif':
[WireFusion Path]/resources/tutorials/tape_rule/loading_background.gif
Figure 83: Changing loading graphics
6. Click
Finish to publish the presentation. A dialog opens confirming that the presentation
has been published. In the dialog, click the Open Folder button to go directly to your published presentation (Figure 84).
55
Figure 84: Publishing confirmed
7. Test
the presentation by double clicking the HTML file. Your default browser should open
and display the presentation.
56
HTML Editing in Dreamweaver
HTML Editing in Dreamweaver

The final step in this tutorial is to insert the published presentation into a HTML file of your
choice, and, to upload the presentation to a web server. We use Macromedia Dreamweaver,
but any HTML editor and FTP client can be used.
1. In
Dreamweaver, open the published WireFusion HTML file (Figure 85).
Figure 85: Dreamweaver opened with the WireFusion HTML file
2. Switch
to Code View so that you can see the HTML source code. Copy all the HTML
source code from (Figure 86):

to

Figure 86: WireFusion HTML source code
3. Open
the HTML file which you would like to insert the WireFusion presentation into.
57
4. Paste
the source code to the position on your page where you would like to show the presentation. Save your HTML file.
5. Copy
the published 'wf-player' folder and the 'My_tape_rule' project folder to the same
folder as your HTML file (Figure 87).
Figure 87: Placing the player and project folders in the same folder as the HTML file
NOTE: It is very important that the 'wf-player' folder and the project folder are located in the same folder as
your HTML file. Else, the presentation will not work.
NOTE: In case you still would like to have the 'wf-player' folder and the project folder in a different folder than
your HTML file, then you have to change the codebase parameter in the HTML source code.
6. Test
your HTML file locally before uploading to the web server. Make sure the presentation
is working.
7. Use
the built-in FTP client to upload your HTML file, the 'wf-player' folder (with contents)
and the 'My_tape_rule' project folder (with contents) to your web server.
8. Open
the uploaded HTML file in your browser and test that the presentation is working as it
should.
58
Summary
Summary
We are now ready with the tutorial and you have learned the basic steps of creating a Web3D
presentation using WireFusion - from 3D modeling to publishing of a final presentation to the
web.
There are still a lot to learn and explore about the 3D capabilities in WireFusion, and a good
point to start with is to read the reference manual WireFusion, Volume II. We also recommend the guide 3D Modeling, which gives useful tips for creating and preparing 3D models
for WireFusion and the web. For those interested in creating dynamic presentations containing a lot of streamed models and textures, such as 3D configurators, we recommend the 3D
API manual/tutorial.
End of tutorial
***
Publication date: December 14, 2005
The author and the publisher make no representation or warranties of any kind with regard to the completeness or
accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book.
All rights reserved 2005 Demicron AB, Sundbyberg, Sweden. World rights reserved. No part of this publication may
be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to photocopy, photograph, magnetic or other record, without the prior agreement and written permission of the publisher.
This product and related documentation are protected by copyright and distributed under licenses restricting its use,
copying, distribution, and decompilation. No part of this product or related documentation may be reproduced in any
form by any means without prior written authorization of Demicron and its licensors, if any.
Trademarks Demicron and WireFusion are trademarks of Demicron AB. Acrobat, Photoshop are registered trademarks of Adobe Systems Incorporated. Java, SunSoft are trademarks of Sun Microsystems, Inc. Windows95, Windows98, Windows ME, Windows NT, Windows 2000, Windows XP are trademarks or registered trademarks of Microsoft Corporation. Pentium is a trademark of Intel Corporation. OS X is a trademark of Apple Computer. All other
trademarks are the property of their respective owners.
59

WF GettingStarted II

Uploaded by

Copyright:

Available Formats

WF GettingStarted II

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WF GettingStarted II

Uploaded by

Copyright:

Available Formats

Tutorial

Any edition of WireFusion 4.1.12 (or later).

Getting Started Volume II: 3D Tutorial

Figure 1: Taking photos of the tape rule

Figure 2: Modeling of the tape rule

Figure 3: Adding interactivity and publishing from WireFusion

Figure 4: Editing and uploading in Dreamweaver

Getting Started Volume II: 3D Tutorial

online in a web browser (Figure 5).

Figure 5: Testing in the browser

As textures that we apply on the 3D model.

Getting Started Volume II: 3D Tutorial

3D Modeling in 3ds Max

the Create panel, create a Box primitive.

Figure 6: Loading a reference image

the box selected, click the Assign Material to Selection button.

3D Modeling in 3ds Max

all faces, except the front face (Figure 7).

Figure 7: Erasing faces

Getting Started Volume II: 3D Tutorial

Figure 8: Freezing the quads in a layer

3D Modeling in 3ds Max

Figure 9: A translucent cylinder with edges

Figure 10: Vertices moved to fit the reference image

Getting Started Volume II: 3D Tutorial

Figure 11: Bevel the front side

the Slice Plane command to cut the faces (Figure 12).

Figure 12: Cutting faces with the Slide Plane

3D Modeling in 3ds Max

Figure 13: Extruding faces

Figure 14: Creating the hole for the button

Getting Started Volume II: 3D Tutorial

to create the cut in the shell, as seen in Figure 15.

Figure 15: Extruding polygons

Figure 16: Creating the belt clip

3D Modeling in 3ds Max

Figure 17: Free-Form Deformation

Getting Started Volume II: 3D Tutorial

Figure 18: Creating the button/lock

Figure 19: Creating the cord using a line spline

3D Modeling in 3ds Max

Figure 21: Creating the tape

Getting Started Volume II: 3D Tutorial

Figure 22: NURMS Subdivision with artifacts

Figure 23: Smoothing groups assigned

3D Modeling in 3ds Max

Figure 24: 4 300 polygons and smooth result

Getting Started Volume II: 3D Tutorial

Figure 25: Creating a texture map of 512x128 in Adobe Photoshop

Figure 26: Using UVW Mapping

3D Modeling in 3ds Max

Figure 27: Using an alpha map to simulate holes

Getting Started Volume II: 3D Tutorial

Figure 28: Using Multi/Sub-Object Material

3D Modeling in 3ds Max

Figure 29: Using Auto Key for animations

Getting Started Volume II: 3D Tutorial

Figure 31: Center the model

3D Modeling in 3ds Max

Figure 32: A Target Camera added to the scene