Extensible 3D (X3D) language bindings
Part 1: ECMAScript
Annex B
(informative)
Examples
This annex provides a variety of X3D examples showing ECMAScript operations.
Table B.1 lists the topics in this clause:
This example demonstrates a scripted response to a TouchSensor isOver event by changing the color of a Box from blue to red:
#X3D V3.0 utf8
PROFILE Immersive Group { children [ Shape { appearance Appearance { material DEF MAT Material { diffuseColor 0 0 1 } } geometry Box {} } DEF TS TouchSensor {} ] } DEF SC Script { inputOnly SFBool isOver outputOnly SFColor diffuseColor_changed url ["ecmascript: function initialize() { } function isOver(val) { if (val == true) { diffuseColor_changed = new SFColor(1,0,0); } else { diffuseColor_changed = new SFColor(0,0,1); } } "] } ROUTE TS.isOver TO SC.isOver ROUTE SC.diffuseColor_changed TO MAT.set_diffuseColor
Click here to view this example in a 3D scene window.
This example shows using createX3DFromString to create nodes:
#X3D V3.0 utf8
PROFILE Immersive DEF HOLDER Transform { translation -2 0 0 } DEF SC Script { outputOnly MFNode children url ["ecmascript: function initialize() { // Create nodes directly in the parent scene shape = Browser.currentScene.createNode('Shape'); box = Browser.currentScene.createNode('Box'); shape.geometry = box; Browser.currentScene.RootNodes[0] = shape; // Create children using the createX3DFromString service vrmlCmd = 'PROFILE Interchange Shape { geometry Sphere{} }' tmpScene = Browser.createX3DFromString(vrmlCmd); nodes = tmpScene.rootNodes; // Nodes must be removed before adding to another scene for(i=0; i < nodes.length; i++) { tmpScene.removeRootNode(nodes[i]); } children = nodes; } "] } ROUTE SC.children TO HOLDER.children
Click here to view this example in a 3D scene window.
This example shows how to use per frame notification to produce a frame rate annotation:
#X3D V3.0 utf8
PROFILE Immersive DEF SC Script { url ["ecmascript: var lastStartTime; function initialize() { date = new Date(); lastStartTime = date.getTime(); } // Called each frame function prepareEvents() { date = new Date(); frameTime = (date.getTime() - lastStartTime) / 1000.0; lastStartTime = date.getTime(); fps = 1.0 / frameTime; Browser.println('FPS: ' + fps); } "] }
Click here to view this example in a 3D scene window.
This example shows adding dynamic routes:
#X3D V3.0 utf8
PROFILE Immersive DEF SC Script { inputOnly SFTime touchTime url ["ecmascript: function touchTime(val) { // Create nodes directly in the parent scene scene = Browser.currentScene; shape = scene.createNode('Shape'); box = scene.createNode('Box'); touchSensor = scene.createNode('TouchSensor'); shape.geometry = box; // Create a Group to hold the nodes group = scene.createNode('Group'); // Add the shape and sensor to the group group.children = new MFNode(shape, touchSensor); // Add the nodes to the scene scene.RootNodes[0] = group; // Add a route from the touchSensor to this script scene.addRoute(touchSensor, 'touchTime', Script, 'touchTime'); } "] }
Click here to view this example in a 3D scene window.
This example shows creation of nodes from a prototype:
#X3D V3.0 utf8
PROFILE Immersive PROTO ColoredSphere [ initializeOnly SFColor color 0 1 0 ] { Shape { appearance Appearance { material Material { diffuseColor IS color } } geometry Sphere {} } } DEF SC Script { url ["ecmascript: function initialize() { // Create nodes directly in the parent scene scene = Browser.currentScene; // Look through proto declarations for ColoredSphere protoDecls = scene.protoDeclarations; var protoDecl; for(i=0; i < protoDecls.length; i++) { if (protoDecls[i].name == 'ColoredSphere') protoDecl = protoDecls[i]; } // Create an instance of RedSphere instance = protoDecl.newInstance(); // Set the color field to Red instance.color = new SFColor(1,0,0); // Add the created proto to the scene scene.rootNodes[0] = instance; } "] }
Click here to view this example in a 3D scene window.