Here's the next step, and it's an exciting one.

Thus far we've had a world we can navigate using the browser controls, and added some limited "animation" of the Viewpoint by creating a list for selection in the VRML browser. What about really animating the Viewpoint, creating a simple tour of our world?

We can do this by creating a Viewpoint node that we place in a Transform node. Check out the code.

#VRML V2.0 utf8

Viewpoint { position 0, 0, 30 }

DEF World Transform {
  translation 0 0 0
  children  [
    DEF Tour Transform {
      children  [
        DEF Viewer Viewpoint { position 0, 0, 0 }
      
      ]
    }# end of Tour transform 
    DEF Center Transform {
      translation 0 0 0
      children  [
        Shape  {
          geometry Sphere {}
          appearance  Appearance {
            material Material { diffuseColor 1 1 1 }
          }
        }
      ]
    }# end of Center transform--white
    DEF Right Transform {
      translation 10 0 0
      children  [
        Shape  {
          geometry Box {}
          appearance  Appearance {
            material Material { diffuseColor 0 1 0 }
          }
        }
      ]
    }# end of Right transform--green
    DEF Left Transform {
      translation -10 0 0
      children  [
        Shape  {
          geometry Box {}
          appearance  Appearance {
            material Material { diffuseColor 1 0 0 }
          }
        }
      ]
    }# end of Left transform--red
    DEF Front Transform {
      translation 0 0 10
      children  [
        Shape  {
          geometry Box {}
          appearance  Appearance {
            material Material { diffuseColor 1 0 1 }
          }
        }
        DEF StartTour TouchSensor {}
      ]
    }# end of Front transform--magenta
    DEF Back Transform {
      translation 0 0 -10
      children  [
        Shape  {
          geometry Box {}
          appearance  Appearance {
            material Material { diffuseColor 0 1 1 }
          }
        }
      ]
    }# end of Back transform--cyan
    DEF Top Transform {
      translation 0 10 0
      children  [
        Shape  {
          geometry Box {}
          appearance  Appearance {
            material Material { diffuseColor 1 1 0 }
          }
        }
      ]
    }# end of Top transform--yellow
    DEF Bottom Transform {
      translation 0 -10 0
      children  [
        Shape  {
          geometry Box {}
          appearance  Appearance {
            material Material { diffuseColor 0 0 1 }
          }
        }
      ]
    }# end of Bottom transform--blue
  ]
}# end of World Transform

DEF Timer TimeSensor { cycleInterval 20 }

DEF Translator PositionInterpolator {
  key [0, .5, 1]
  keyValue [0 0 30, -10 0 10, -10 0 10]
}# end of Translator  

DEF Rotator OrientationInterpolator {
  key [0, .5, 1]
  keyValue [0 1 0 0, 0 1 0 0, 0 1 0 -1]
}

ROUTE StartTour.touchTime TO Timer.startTime
ROUTE Timer.isActive TO Viewer.set_bind
ROUTE Timer.fraction_changed TO Translator.set_fraction
ROUTE Timer.fraction_changed TO Rotator.set_fraction
ROUTE Translator.value_changed TO Tour.set_translation
ROUTE Rotator.value_changed TO Tour.set_rotation

Sure there's a lot here, but it's well worth our attention. An unnamed Viewpoint node, set to 0, 0, 30 starts the file. Thus the browser will first bind to this node, and the viewer will begin from the same front view we've already been using. But we can change this with a click of the mouse.

A second viewpoint named Viewer is set in a Transform named Tour. In effect, the Viewpoint has been turned into a camera that can be transformed in space just like any other object. Translating Tour moves the Viewpoint. Rotating Tour rotates the Viewpoint.

A TouchSensor named StartTour is included in the Transform that contains the magenta cube. Thus clicking on the magenta cube will trigger the sensor. Following the ROUTE statements at the bottom of the code, we find that clicking on that cube will bind the Viewer Viewpoint. This binding triggers the TimeSensor, which in turn starts the animation. The animation contains both a translation and a rotation. The first half of the animation moves the viewer to a position in front of the red cube, but does so without turning. Then the cube stops moving and starts turning toward the center of the space. This animation requires three keys for both the position and rotation interpolators.

Give it a try.

CLICK HERE to view this example if you have a VRML browser. If you don't yet have a VRML browser, hurry up and download the new Cosmo Player for free from Cosmo Software.

In this file, the tour begins when you click and can't be stopped until it's done, when the TimeSensor deactivates. The deactivation of Timer generates a FALSE isActive message that is sent to Viewer to unbind it. Another approach would replace the routing statements as follows:

ROUTE StartTour.isActive TO Viewer.set_bind
ROUTE Viewer.bindTime TO Timer.startTime
ROUTE Timer.fraction_changed TO Translator.set_fraction
ROUTE Timer.fraction_changed TO Rotator.set_fraction
ROUTE Translator.value_changed TO Tour.set_translation
ROUTE Rotator.value_changed TO Tour.set_rotation

In this case, the TouchSensor triggers the binding directly, and the binding triggers Timer. This is the opposite of the previous example. But the difference is interesting. A TouchSensor is activated when the user presses down on the mouse button, but is deactivated when the button is released. Thus letting up on the mouse button switches the user back to the original Viewport. This puts the tour under the user's control. If you want to stop, just let up on the button!

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