Web3D – X3DOM
X3DOM animation and interactivity
Timesensor
Embedded animation is supported through Routes, Timesensors and interpolators
TimeSensor : X3DTimeDependentNode,
X3DSensorNode {
SFTime [in,out] cycleInterval 1 (0,∞)
SFBool [in,out] enabled
TRUE
SFBool [in,out] loop
FALSE
SFNode [in,out] metadata
NULL
[X3DMetadataObject]
SFTime [in,out] pauseTime
0 (-∞,∞)
SFTime [in,out] resumeTime
0
SFTime [in,out] startTime
0 (-∞,∞)
SFTime [in,out] stopTime
0 (-∞,∞)
SFTime [out] cycleTime
SFTime [out] elapsedTime
SFFloat [out] fraction_changed
SFBool [out] isActive
SFBool [out] isPaused
SFTime [out] time
}
Intepolators
ColorInterpolator
CoordinateInterpolator
CoordinateInterpolator2D
NormalInterpolator
OrientationInterpolator
PositionInterpolator
PositionInterpolator2D
ScalarInterpolator
SplinePositionInterpolator
SplinePositionInterpolator2D
SplineScalarInterpolator
SquadOrientationInterpolator
EaseInEaseOut
PositionInterpolator : X3DInterpolatorNode {
SFFloat [in] set_fraction
(-∞,∞)
MFFloat [in,out] key
[] (-∞,∞)
MFVec3f [in,out] keyValue [] (-∞,∞)
SFNode [in,out] metadata NULL
[X3DMetadataObject]
SFVec3f [out] value_changed
}
Animation Implementation
http://doc.x3dom.org/tutorials/animationInteraction/animate/index.html
<transform DEF="ball">
<shape>
<appearance>
<material diffuseColor='1 0 0'> </material>
</appearance>
<sphere></sphere>
</shape>
</transform>
<timeSensor DEF="time" cycleInterval="2" loop="true"> </timeSensor>
<PositionInterpolator DEF="move" key="0 0.5 1" keyValue="0 0 0 0 3 0 0 0 0"> </PositionInterpolator>
<Route fromNode="time" fromField ="fraction_changed" toNode="move" toField="set_fraction>
</Route>
<Route fromNode="move" fromField ="value_changed" toNode="ball" toField="translation>
</Route>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>My first X3DOM page</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>
</head>
<body>
<h1>Animate Objects with X3DOM!</h1>
<p>
Learn how to animate objects.
</p>
<x3d width='500px' height='400px'>
<scene>
<transform DEF="ball">
<shape>
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
<timeSensor DEF="time" cycleInterval="2" loop="true"></timeSensor>
<PositionInterpolator DEF="move" key="0 0.5 1" keyValue="0 0 0 0 3 0 0 0 0"></PositionInterpolator>
<Route fromNode="time" fromField ="fraction_changed" toNode="move" toField="set_fraction"></Route>
<Route fromNode="move" fromField ="value_changed" toNode="ball" toField="translation"></Route>
</scene>
</x3d>
</body>
</html>
Switch nodes
<x3d width='500px' height='400px'>
<scene>
<Switch whichChoice="0" id="switcher">
<transform DEF="ball" translation='-2 0 0'>
<shape>
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
<transform DEF="ball" translation='2 0 0'>
<shape>
<appearance>
<material diffuseColor='0 0 1'></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
</Switch>
</scene>
</x3d>
/**
* Change the selected object of the swichting node
*
* @param nodeId number: New node id to set (starting from 0, or -1 to hide all of them)
*/
function changeVisibleNode(nodeId)
{
document.getElementById("switcher").setAttribute("whichChoice", nodeId);
}
Viewpoint (Camera)
Name
Type
Default
Value
bind
SFBool
centerOfRotation
SFVec3 0,0,0
f
description
SFStrin ""
g
fieldOfView
SFFloat
Range
FALSE
Inheritance
X3DViewpointN
ode
X3DViewpointN
ode
785398 [0, pi]
Standard
Description
Pushes/pops the node on/from the
top of the bindable stack
The centerOfRotation field specifies
a center about which to rotate the
user's eyepoint when in EXAMINE
mode.
Description of the bindable node
Preferred minimum viewing angle
from this viewpoint in radians. Small
field of view roughly corresponds to
a telephoto lens, large field of view
roughly corresponds to a wideangle lens. Hint: modifying
Viewpoint distance to object may be
better for zooming. Warning:
fieldOfView may not be correct for
different window sizes and aspect
ratios. Interchange profile hint: this
field may be ignored.
better for zooming. Warning:
fieldOfView may not be correct for
different window sizes and aspect
ratios. Interchange profile hint: this
field may be ignored.
Viewpoint (Camera)
isActive
SFBool
FALSE
X3DViewpointN
ode
metadata
SFNode X3DMeta
dataObje
ct
orientation
SFRotat 0,0,0,1
ion
position
SFVec3 0,0,10
f
zFar
SFFloat
-1 -1 or [0,
inf]
zFar
SFFloat
-1 -1 or [0,
inf]
Specifies the far plane.
zNear
SFFloat
-1 -1 or [0,
inf]
Specifies the near plane.
X3DViewpointN
ode
Field to add metadata information
The orientation fields of the
Viewpoint node specifies relative
orientation to the default
orientation.
The position fields of the Viewpoint
node specifies a relative location in
the local coordinate system.
Position is relative to the
coordinate system's origin (0,0,0),
Specifies the far plane.
Changing viewpoints
<X3D width="600" height="600">
<Scene DEF='scene'>
<Viewpoint id="front" position="-0.07427 0.95329 -2.79608" orientation="-0.01451
0.99989 0.00319 3.15833" description="camera"></Viewpoint>
<Viewpoint id="right" position="-2.43383 1.07351 -1.28700" orientation="-0.00318 0.99950 -0.03159 2.06609" description="camera"></Viewpoint>
<Transform>
<Inline url="deer.x3d"></Inline>
</Transform>
</Scene>
</X3D>
<button
onclick="document.getElementById('right').setAttribute('set_bind','true');">Right</button>
<button onclick="document.getElementById('front').setAttribute('set_bind','true');">Left
</button>
© Copyright 2025 Paperzz