Learning About Widgets with VRML

"Touch Me" >Page 1, 2

There are two major items we must add to turn the cube into a button. First we need to make the cube touch sensitive. Next we need to add something to turn on, like a light source.

In order to make the cube sensitive to the cursor we must wrap it up in a TouchSensor. For good measure, and because we need a name, let's also give this TouchSensor the name ELMO. We create the name for the TouchSensor using the DEF construct. We'll call this TouchSensor ELMO, after the old "Tickle Me Elmo" phenomenon of a few years ago.

The definition of the sensor looks like: DEF ELMO TouchSensor {}

To make the cube touch sensitive we add a TouchSensor in the same grouping node (the Transform) as the geometry definition. Now the geometry section looks like:

Transform {
	   translation 0 0 -4
	   children	[
		   DEF ELMO TouchSensor {}
		   Shape {
               appearance Appearance {
                     material DEF WHITE Material {
                              diffuseColor 1 1 1
                     }
               }
	
               geometry Box { }
           }
		]
	}

The PointLight can be defined as:

DEF	LIGHT  PointLight {
	location 3 0 0
	color  1 0 0
	on FALSE 
	}
	

Again we need the DEF because we need a name to get control of the point light a little bit later.

Finally we must direct the "event" generated by touching the cube to turn on the light, using a ROUTE. We simply say: ROUTE ELMO.isActive TO LIGHT.on

The isActive field of the Touch sensor outputs (boolean) events that we connect up to the boolean input field (the "on" field) of the PointLight Node.

The completed file:

#VRML V2.0 utf8

		 Background { 
#note that this 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 ]
   }
   
   Transform {
	   translation 0 0 -4
	   children	[
		   DEF ELMO TouchSensor {}
		   Shape {
               appearance Appearance {
                     material DEF WHITE Material {
                              diffuseColor 1 1 1
                     }
               }
	
               geometry Box { }
           }
		]
	}

	DEF	LIGHT  PointLight {
	location 3 0 0
	color  1 0 0
	on FALSE 
	}

ROUTE ELMO.isActive TO LIGHT.on  

And this final masterpiece of the week is located in widgetexample.wrl.

Note a few things the PointLight is positioned in front of the cube and shines it's light only on the front face of the cube. You can however click on any part of the cube to turn the light on illuminating that front face.

Now this is a really really lousy button. Why it doesn't even function the way we expect a normal button to work. Most buttons turn something on at the first press, and turn it back off at the second press, in other word it's a toggle switch.

Next week we'll look at how to extend this miserable example into a less miserable example by implementing an actual toggle switch!

Previous Page Starting the Widget >Page 1,2