Part 3: Flip that Switch, Widgets with VRML
Make that Switch Look Better
 More of this Feature
• Part 1: Looking Better
 
 Join The Discussion
"Have certain sites increased revenue because of 3D features?"
AHEDSTROM
 
 Related Resources
• VRML Repository
• Web3D Consortium
 

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.

ZZZNEWSLETTERSIGNUP1ZZZ
[Tutorials] [Web3D Technology Comparison] [Virtual Humans]
[Virtual Reality] [Art] [People of Web3D]
[Panoramic Imaging] [FAQs] [Companies]

Next page > Flip It > Page 1, 2