Rather than drawing out this example bit by bit let's look at the
entire file and then dissect it. Following is the file:
#VRML V2.0 utf8
Background {
#note that this Background example is copied
#from VRML 2.0 Source book a great VRML reference
skyColor [
0.0 0.2 0.7,
0.0 0.5 1.0,
1.0 1.0 1.0
]
skyAngle [1.309, 1.571 ]
groundColor [
0.1 0.1 0.0,
0.4 0.25 0.2,
0.6 0.6 0.6
]
groundAngle [ 1.309, 1.571 ]
}
NavigationInfo {
headlight FALSE
type ["EXAMINE", "WALK"]
}
DEF BOXBASE Transform {
translation 0 0 -4
children [
Shape {
appearance Appearance {
material Material {
diffuseColor 0.5 0.5 1
}
}
geometry Box { size 2.0 2.0 0.2 }
}
]
}
DEF BOXGEOM Transform {
translation 0 0 -4
scale 1 1 1
children [
DEF ELMO TouchSensor {}
Shape {
appearance Appearance {
material DEF WHITE Material {
diffuseColor 1 1 1
}
}
geometry Box { size 0.4 2.0 0.2}
}
]
}
#Red and green lights just for effect
DEF LIGHT PointLight {
location 3 0 0
color 1 0 0
on FALSE
}
DEF TLIGHT PointLight {
location 5 0 0
color 0 1 0
on FALSE
}
#Two clocks one for each of the two animation (rotations)
DEF CLOCK TimeSensor {
cycleInterval 1.5
startTime -1
loop FALSE
enabled TRUE
}
DEF TCLOCK TimeSensor {
cycleInterval 1.5
startTime -1
loop FALSE
enabled FALSE
}
# The oriantation interpolators
# rotate the switch in opposite direction
DEF ROTATOR OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
1 0 0 0.4,
1 0 0 1.4,
1 0 0 2.5
]
}
DEF BROTATOR OrientationInterpolator {
key [ 0.0, 0.50, 1.0 ]
keyValue [
1 0 0 2.5 ,
1 0 0 1.4,
1 0 0 0.4
]
}
#Output two values each the opposite of the other
DEF ToggleScript Script {
field SFBool value FALSE
field SFBool negvalue TRUE
eventIn SFBool set_boolean
eventOut SFBool value_changed
eventOut SFBool negvalue_changed
url "javascript:
function set_boolean( bool, eventTime ) {
if (bool == false )
{
return;
}
if (value == true )
{
negvalue = true;
value = false;
}
else {
negvalue = false
value = true;
}
value_changed = value;
negvalue_changed = negvalue;
}"
}
ROUTE ELMO.isActive TO ToggleScript.set_boolean
ROUTE ToggleScript.value_changed TO LIGHT.set_on
ROUTE ToggleScript.negvalue_changed TO TLIGHT.set_on
ROUTE ToggleScript.value_changed TO CLOCK.enabled
ROUTE ELMO.touchTime TO CLOCK.set_startTime
ROUTE CLOCK.fraction_changed TO ROTATOR.set_fraction
ROUTE ROTATOR.value_changed TO BOXGEOM.set_rotation
ROUTE ToggleScript.negvalue_changed TO TCLOCK.enabled
ROUTE ELMO.touchTime TO TCLOCK.set_startTime
ROUTE TCLOCK.fraction_changed TO BROTATOR.set_fraction
ROUTE BROTATOR.value_changed TO BOXGEOM.set_rotation
There are a few cosmetic changes to the geometry. The addition of a mounting plate
for the switch and changing the scale of the part of the switch that flips so that it
looks more like a real switch. It's still not very real but you can make the final adjustments.
Recall that the ToggleScript outputs alternating TRUE and FALSE values.
We need to cause the animation described on the first page to start when the user clicks on the switch and
we need another animation to start when the user clicks again. A second rotation interpolator
was set up with opposite direction values, and a second clock was instantiated to
control the animation. Rather then coming up with some complicated
script that would select which animation to play the ToggleScript
was modified to output to values. One is the TRUE and the other is the FALSE booleans.
Each is ROUTED to the corresponding animations therefore only one would play for
each user click, and they would alternate. No doubt there are many other
ways to accomplish this trick.
In the final part of this series (which may or may not come next week) we'll look
at the "right" way to do this using VRML's extension mechanism PROTOs.