B.1 Introduction and topics

B.1.1 Introduction

This annex provides a variety of X3D examples showing ECMAScript operations.

B.1.2 Topics

Table B.1 lists the topics in this clause:

B.2 touchSensor isOver event

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.

B.3 Create nodes

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.

B.4 Per frame notification

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.

B.5 Add dynamic routes

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.

B.6 Create nodes from a prototype

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.