Difference between revisions of "X3D/HTML Integration"
From Web3D.org
| Line 1: | Line 1: | ||
Example to investigate X3D/HTML specification issues | Example to investigate X3D/HTML specification issues | ||
| − | As an illustration consider the X3DOM example [http://doc.x3dom.org/tutorials/animationInteraction/onoutputchange/example.html "OnOutputChange"] | + | As an illustration consider the X3DOM example [http://doc.x3dom.org/tutorials/animationInteraction/onoutputchange/example.html "OnOutputChange"]. The source for this example is reproduced below. |
| − | + | ||
<pre> | <pre> | ||
| Line 84: | Line 83: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
| + | |||
| + | Let's concentrate on a single line in this example: | ||
| + | <pre> | ||
| + | <PositionInterpolator DEF="move" key="0 0.5 1" keyValue="-2 -2.5 0 -2 2.5 0 -2 -2.5 0" onoutputchange="snapBall(event)"></PositionInterpolator> | ||
</pre> | </pre> | ||
Revision as of 01:02, 9 June 2016
Example to investigate X3D/HTML specification issues
As an illustration consider the X3DOM example "OnOutputChange". The source for this example is reproduced below.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>X3Dom Example OnOutputChange Event</title>
<script type='text/javascript' src='http://x3dom.org/release/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>
<script>
/**
* Uses the values of a PositionInterpolator to move another ball,
* but instead of just routing the values, round the y component.
* Thus the second ball moves like he is snapping to an invisible raster
*/
function snapBall(eventObject)
{
//Check if type and output of the eventObject are correct
//There may be multiple eventObjects but only one of them contains the value we need
if(eventObject.type != "outputchange" || eventObject.fieldName != "value_changed")
return;
//Get the value...
var value = eventObject.value;
//...and create a copy with the manipulated coordinates
var newPos = new x3dom.fields.SFVec3f(2, Math.round(value.y), 0);
//Set the newly created array as new position for the second ball
document.getElementById("ball2").setAttribute('translation', newPos.toString());
//Show debug information (of course the data can be used to control non x3dom-objects, too)
document.getElementById("posInterp").innerHTML = Math.round(value.y*100)/100;
document.getElementById("posSnaped").innerHTML = newPos.y;
}
</script>
</head>
<body>
<h1>Animate Objects with X3DOM!</h1>
<p>
Learn how to manipulate objects using values from the output of other objects.
</p>
<div>
Y-Position of output field (routed to red ball): <span id="posInterp"></span><br>
Calculated Y-Position (set directly to blue ball): <span id="posSnaped"></span>
</div>
<x3d width='500px' height='400px'>
<scene>
<transform DEF="ball" translation='-2 0 0'>
<shape>
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
<transform DEF="ball2" translation='2 0 0' id="ball2">
<shape>
<appearance>
<material diffuseColor='0 0 1'></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
<timeSensor DEF="time" cycleInterval="4" loop="true"></timeSensor>
<PositionInterpolator DEF="move" key="0 0.5 1" keyValue="-2 -2.5 0 -2 2.5 0 -2 -2.5 0" onoutputchange="snapBall(event)"></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>
Let's concentrate on a single line in this example:
<PositionInterpolator DEF="move" key="0 0.5 1" keyValue="-2 -2.5 0 -2 2.5 0 -2 -2.5 0" onoutputchange="snapBall(event)"></PositionInterpolator>
