3D Animation Workshop: Lesson 30: VRML 97--Touch and Go!

Lesson 30 - VRML 97--Touch and Go! - Part 2

The VRML code from the previous lesson reads as follows:

DEF MovingBox Transform {   children  [     Shape  {       geometry Box {}       appearance Appearance {         material Material { diffuseColor 1 0 0 }       }     }   ] }# end of MovingBox Transform DEF Timer TimeSensor {   cycleInterval 10   loop TRUE }# end of Timer DEF Translator PositionInterpolator {   key [0, 1]   keyValue [0 0 0, 5 0 0] }# end of Translator   ROUTE Timer.fraction_changed TO Translator.set_fraction ROUTE Translator.value_changed TO MovingBox.set_translation

CLICK HERE to view example if you have a VRML browser.

Once you've refreshed yourself as to the meaning of this animation, remember that it simply begins to play as soon as the file is read into the browser. Now we'll take the next step and make it interactive.

To do this, we add a TouchSensor. The TimeSensor generates events by the passage of time--it's a clock. The TouchSensor generates events when the cursor is passed over the object, and especially when the user clicks the mouse over the object. This kind of "event-handling" is basic to all graphical interface programming--the most obvious example is the loading of a new URL when you click on a link in a web page. Here we will simply add a default TouchSensor named Click, and add a ROUTE statement that starts the Timer when the object is clicked on.

#VRML V2.0 utf8 DEF MovingBox Transform {   translation 0 0 0   children  [     Shape  {       geometry Box {}       appearance Appearance {         material Material { diffuseColor 1 0 0 }       }     }   ] }# end of MovingBox Transform DEF Click TouchSensor {} DEF Timer TimeSensor {   cycleInterval 10 }# end of Timer DEF Translator PositionInterpolator {   key [0, 1]   keyValue [0 0 0, 5 0 0] }# end of Translator   ROUTE Click.touchTime TO Timer.startTime ROUTE Timer.fraction_changed TO Translator.set_fraction ROUTE Translator.value_changed TO MovingBox.set_translation

When you run this example on the new Cosmo browser you'll note that, unlike the previous example, the cursor changes as it passes over the box. Clicking will start the animation. Click again when the animation stops to start it again.

CLICK HERE to example if you have a VRML browser.

Notice that the Loop has been eliminated in Timer (the Time Sensor). The default value for the Loop field of the TimeSensor is FALSE, and thus eliminating the field name here effectively sets the value to FALSE. In order to get started in the simplest way possible, we've ignored the full definitions of our nodes. Let's fill in the gaps now so that our ROUTE statements will begin to make more sense.

To Continue to Part 3, or Return to Part 1, Use Arrow Buttons

Created: December 23, 1997
Revised: December 23, 1997

URL: https://webreference.com/3d/lesson30/part2.html