CODEWITHSUNDEEP
javascriptx3dx3dom
user1964638
user1964638

Reputation: 59

What is the best way to create animations with x3Dom?

I want to build a scene that has some animations that are toggled by a checkbox. When clicked I want the height of all box elements to scale to '.1'. When clicked again I want it to return to the original height. I have experimented with Routes and TimeSensors but have found them difficult to work with. Are there any simpler options for animating in x3dom?

Here is some code I have used in my template

<timeSensor DEF="time" cycleInterval="2" loop="false" > </timeSensor>
<positionInterpolator def="scale" key="0 1" keyValue="1 1 1  1 .1" ></positionInterpolator>
<route fromNode="time" fromField ="fraction_changed" toNode="scale" toField="set_fraction"></route> 
<route fromNode="scale" fromField ="value_changed" toNode="box" toField="size"></route>

Upvotes: 1

Views: 746

Answers (1)

Traian
Traian

Reputation: 3003

the TimeSensor is mandatory because he's the one triggering the keyValue of an interpolator.
Here's a simple example, the TimeSensor is very easy to use:

DEF TS TimeSensor { cycleInterval 2 loop TRUE }
DEF SI ScalarInterpolator {
key [0 0.5 1]
keyValue [2 2 2 1 1 1 0.5 0.5 0.5] }

ROUTE TS.fraction_changed TO SI.set_fraction
ROUTE SI.value_changed TO BOX.scale

The fraction of the timer is routed to the ScalarInterpolator. Whenever the fraction is bigger than a value in the key (0, 0.5 or 1) the corresponding keyValue (the Nth index) is routed to the scale of the BOX. That's it...

If you want to have a slower effect you can increase the cycle interval of the TimeSensor. If you want to have the effect just once then you can set the loop to FALSE.

Also you can have multiple key & keyValues..

Upvotes: 1

Related Questions