Titania X3D Editor

Bring Colours to Your Life.

Titania v4.3.3

Bring Colours to Your Life.

X3D Reference

Animating transforms


An animation changes something over time:

  • position - a car driving
  • orientation - an airplane banking
  • color - seasons changing

Animation requires control over time:

  • When to start and stop
  • How fast to go

Controlling time

  • A TimeSensor node is similar to a stop watch
    • You control the start and stop time
  • The sensor generates time events while it is running
  • To animate, route time events into other nodes

Using absolute time

  • A TimeSensor node generates absolute and fractional time events
  • Absolute time events give the wall-clock time
    • Absolute time is measured in seconds since 12:00am January 1, 1970!
    • Useful for triggering events at specific dates and times

Using fractional time

  • Fractional time events give a number from 0.0 to 1.0
    • When the sensor starts, it outputs a 0.0
    • At the end of a cycle, it outputs a 1.0
    • The number of seconds between 0.0 and 1.0 is controlled by the cycle interval
  • The sensor can loop forever, or run through only one cycle and stop

Syntax: TimeSensor

  • A TimeSensor node generates events based upon time
    • startTime and stopTime - when to run
    • cycleInterval - how long a cycle is
    • loop - whether or not to repeat cycles

XML Encoding

Classic Encoding

Using timers

To create a continuously running timer:

  • loop TRUE
  • stopTime <= startTime

When stop time <= start time, stop time is ignored

To run until the stop time:

  • loop TRUE
  • stopTime > startTime

To run one cycle then stop:

  • loop FALSE
  • stopTime <= startTime

The set_startTime input event:

  • Sets when the timer should start

The set_stopTime input event:

  • Sets when the timer should stop

Using timer outputs

The isActive output event:

  • Outputs TRUE at timer start
  • Outputs FALSE at timer stop

The time output event:

  • Outputs the absolute time

The fraction_changed output event:

  • Outputs values from 0.0 to 1.0 during a cycle
  • Resets to 0.0 at the start of each cycle

A sample time sensor

XML Encoding

Classic Encoding

Converting time to position

To animate the position of a shape you provide:

  • A list of key positions for a movement path
  • A time at which to be at each position

An interpolator node converts an input time to an output position

  • When a time is in between two key positions, the interpolator computes an intermediate position

Interpolating positions

Each key position along a path has:

  • A key value (such as a position)
  • A key fractional time

Interpolation fills in values between your key values:

Fractional Time Position
0.0 0.0 0.0 0.0
0.1 0.4 0.1 0.0
0.2 0.8 0.2 0.0
... ...
0.5 4.0 1.0 0.0
... ...

Syntax: PositionInterpolator

A PositionInterpolator node describes a position path

  • key - key fractional times
  • keyValue - key positions

XML Encoding

Classic Encoding

Typically route into a Transform node's set_translation input

Using position interpolator inputs and outputs

The set_fraction input:

  • Sets the current fractional time along the key path

The value_changed output:

  • Outputs the position along the path each time the fraction is set

A sample using position interpolators

XML Encoding

Classic Encoding

Using other types of interpolators

Animate position PositionInterpolator
Animate rotation OrientationInterpolator
Animate scale PositionInterpolator
Animate color ColorInterpolator
Animate transparency ScalarInterpolator

Syntax: OrientationInterpolator

A OrientationInterpolator node describes an orientation path

  • key - key fractional times
  • keyValue - key rotations (axis and angle)

XML Encoding

Classic Encoding

Typically route into a Transform node's set_rotation input

Syntax: ColorInterpolator

ColorInterpolator node describes a color path

  • key - key fractional times
  • keyValue - key colors (red, green, blue)

XML Encoding

Classic Encoding

Typically route into a Material node's set_diffuseColor or set_emissiveColor inputs

Syntax: ScalarInterpolator

ScalarInterpolator node describes a scalar path

  • key - key fractional times
  • keyValue - key scalars (used for anything)

XML Encoding

Classic Encoding

Often route into a Material node's set_transparency input


The TimeSensor node's fields control:

  • Timer start and stop times
  • The cycle interval
  • Whether the timer loops or not

The sensor outputs:

  • true/false on isActive at start and stop
  • absolute time on time while running
  • fractional time on fraction_changed while running

Interpolators use key times and values and compute intermediate values

All interpolators have:

  • a set_fraction input to set the fractional time
  • a value_changed output to send new values

Some interpolators are: