Extensible 3D (X3D) encodings
Part 5: JSON encoding

Annex B

(informative)

Examples

--- X3D separator bar ---

cube B.1 Topics

This annex contains X3D examples using the JSON encoding. Table B.1 lists the topics in this annex.

Table B.1 — Topics

--- X3D separator bar ---

cube B.2 Simple example

This example contains a simple scene defining a view of a red sphere and a blue box, lit by a directional light as shown in Figure B.1:

Red sphere meets blue box

Figure B.1 — Red sphere meets blue box

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interchange",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"RedSphereBlueBox.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: show simple Shapes, including different Materials and geometry."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"26 November 2015"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.2 Simple example"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#SimpleExample"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/RedSphereBlueBox.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Transform":
            {
              "-children":[
                { "NavigationInfo":
                  {
                    "@headlight":false,
                    "@type":["EXAMINE"]
                  }
                },
                { "DirectionalLight":
                  {
                  }
                },
                { "Transform":
                  {
                    "@translation":[3.3,0.0,1.0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Sphere":
                              {
                                "@radius":2.3
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                      "@diffuseColor":[1.0,0.0,0.0]
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                { "Transform":
                  {
                    "@rotation":[0.0,0.707,0.707,0.9],
                    "@translation":[-2.4,0.2,1.0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Box":
                              {
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                      "@diffuseColor":[0.0,0.0,1.0]
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.3 Instancing (sharing)

Reading the following file results in three spheres being drawn, as shown in Figure B.2. The first sphere defines a unit sphere at the origin. The second sphere, named "Joe", defines a smaller sphere translated along the +x axis, the third sphere is a reference to the second sphere and is translated along the -x axis. If any changes occur to the second sphere (e.g. radius changes), the third sphere will also change.

Instancing

Figure B.2 — Instancing

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interchange",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"Instancing.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: demonstrate reuse of content instances through DEF, USE."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"07 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.3 Instancing (sharing)"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/Examples.html#Instancing"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/Instancing.x3d"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Transform":
            {
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "Sphere":
                        {
                        }
                      }
                  }
                },
                { "Transform":
                  {
                    "@translation":[2.0,0.0,0.0],
                    "-children":[
                      { "Shape":
                        {
                          "@DEF":"Joe",
                          "-geometry":
                            { "Sphere":
                              {
                                "@radius":0.2
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                { "Transform":
                  {
                    "@translation":[-2.0,0.0,0.0],
                    "-children":[
                      { "Shape":
                        {
                          "@USE":"Joe"
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

NOTE: The spheres are unlit because no appearance was specified.

--- X3D separator bar ---

cube B.4 Prototype example

A simple table with different colours for the legs and top might be prototyped as shown in Figure B.3.

Prototype example

Figure B.3 — Prototype

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"Prototype.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: defining a Prototype, demonstration of IS/connect definitions."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"07 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.4 Prototype example"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#PrototypeExample"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/Prototype.x3d"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "ProtoDeclare":
            {
              "@name":"TwoColorTable",
              "ProtoInterface": {
                  "field": [
                    {
                      "@name":"legColor",
                      "@accessType":"initializeOnly",
                      "@type":"SFColor",
                      "@value":[0.8,0.4,0.7]
                    },
                    {
                      "@name":"topColor",
                      "@accessType":"initializeOnly",
                      "@type":"SFColor",
                      "@value":[0.6,0.6,0.1]
                    }
                  ]
              },
              "ProtoBody": {
                  "-children":[
                    { "Transform":
                      {
                        "-children":[
                          { "Transform":
                            {
                              "@translation":[0.0,0.6,0.0],
                              "-children":[
                                { "#comment":"table top"
                                },
                                { "Shape":
                                  {
                                    "-appearance":
                                      { "Appearance":
                                        {
                                          "-material":
                                            { "Material":
                                              {
                                                "@DEF":"TableTopMaterial",
                                                "IS": {
                                                    "connect": [
                                                      {
                                                        "@nodeField":"diffuseColor",
                                                        "@protoField":"topColor"
                                                      }
                                                    ]
                                                }
                                              }
                                            }
                                        }
                                      },
                                    "-geometry":
                                      { "Box":
                                        {
                                          "@size":[1.2,0.2,1.2]
                                        }
                                      }
                                  }
                                }
                              ]
                            }
                          },
                          { "Transform":
                            {
                              "@translation":[-0.5,0.0,-0.5],
                              "-children":[
                                { "#comment":"first table leg"
                                },
                                { "Shape":
                                  {
                                    "@DEF":"Leg",
                                    "-appearance":
                                      { "Appearance":
                                        {
                                          "-material":
                                            { "Material":
                                              {
                                                "@DEF":"LegMaterial",
                                                "@diffuseColor":[1.0,0.0,0.0],
                                                "IS": {
                                                    "connect": [
                                                      {
                                                        "@nodeField":"diffuseColor",
                                                        "@protoField":"legColor"
                                                      }
                                                    ]
                                                }
                                              }
                                            }
                                        }
                                      },
                                    "-geometry":
                                      { "Cylinder":
                                        {
                                          "@height":1.0,
                                          "@radius":0.1
                                        }
                                      }
                                  }
                                }
                              ]
                            }
                          },
                          { "Transform":
                            {
                              "@translation":[0.5,0.0,-0.5],
                              "-children":[
                                { "#comment":"another table leg"
                                },
                                { "Shape":
                                  {
                                    "@USE":"Leg"
                                  }
                                }
                              ]
                            }
                          },
                          { "Transform":
                            {
                              "@translation":[-0.5,0.0,0.5],
                              "-children":[
                                { "Shape":
                                  {
                                    "@USE":"Leg"
                                  }
                                },
                                { "#comment":"another table leg"
                                }
                              ]
                            }
                          },
                          { "Transform":
                            {
                              "@translation":[0.5,0.0,0.5],
                              "-children":[
                                { "Shape":
                                  {
                                    "@USE":"Leg"
                                  }
                                },
                                { "#comment":"another table leg"
                                }
                              ]
                            }
                          },
                          { "#comment":"End of root Transform's children"
                          }
                        ]
                      }
                    },
                    { "#comment":"End of root Transform"
                    }
                  ]
              }
            }
          },
          { "#comment":"End of prototype"
          },
          { "#comment":"The prototype is now defined. Although it contains a number of nodes, only the legColor and topColor fields are public. Instead of using the default legColor and topColor, this instance of the table has red legs and a green top:"
          },
          { "ProtoInstance":
            {
              "@name":"TwoColorTable",
              "fieldValue": [
                {
                  "@name":"legColor",
                  "@value":[1,0,0]
                },
                {
                  "@name":"topColor",
                  "@value":[0,1,0]
                }
              ]
            }
          },
          { "NavigationInfo":
            {
              "@type":["EXAMINE"]
            }
          },
          { "#comment":"Use the Examine viewer"
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.5 Scripting example

This Script node decides whether or not to open a bank vault given openVault and combinationEntered messages. To do this, it remembers whether or not the correct combination has been entered. The Script node is combined with a Sphere, a TouchSensor and a Sound node to show how it works. When the pointing device is over the sphere, the combinationEntered event of the Script is sent. Then, when the Sphere is touched (typically when the mouse button is pressed) the Script is sent the openVault event. This generates the vaultUnlocked outputOnly event which starts a 'click' sound. Here is the example:

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"Scripting.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: this Script node decides whether or not to open a bank vault given openVault and combinationEntered messages. To do this, it remembers whether or not the correct combination has been entered. The Script node combined with a Sphere, a TouchSensor and a Sound node to show how is works. When the pointing device is over the sphere, the combinationEntered eventIn of the Script is sent. Then, when the Sphere is touched (typically when the mouse button is pressed) the Script is sent the openVault eventIn. This generates the vaultUnlocked eventOut which starts a click sound."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"09 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.5 Scripting example"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#ScriptingExample"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/Scripting.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Script":
            {
              "@DEF":"OpenVault",
              "field": [
                {
                  "@name":"openVault",
                  "@accessType":"inputOnly",
                  "@type":"SFTime"
                },
                {
                  "@name":"combinationEntered",
                  "@accessType":"inputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"vaultUnlocked",
                  "@accessType":"outputOnly",
                  "@type":"SFTime"
                },
                {
                  "@name":"unlocked",
                  "@accessType":"initializeOnly",
                  "@type":"SFBool",
                  "@value":false
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function combinationEntered (value) {",
"        unlocked = value;",
"      }",
"      function openVault(value) {",
"      if (unlocked) vaultUnlocked = value;",
"      }"
]
            }
          },
          { "Shape":
            {
              "-appearance":
                { "Appearance":
                  {
                    "-material":
                      { "Material":
                        {
                          "@diffuseColor":[1,0,0]
                        }
                      }
                  }
                },
              "-geometry":
                { "Sphere":
                  {
                  }
                }
            }
          },
          { "Sound":
            {
              "@maxBack":1000,
              "@maxFront":1000,
              "@minBack":1000,
              "@minFront":1000,
              "-source":
                { "AudioClip":
                  {
                    "@DEF":"Click",
                    "@description":"clicking sound",
                    "@stopTime":1,
                    "@url":["click.wav","http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/click.wav"]
                  }
                }
            }
          },
          { "TouchSensor":
            {
              "@DEF":"TS",
              "@description":"touch to click"
            }
          },
          { "ROUTE":
            {
              "@fromField":"isOver",
              "@fromNode":"TS",
              "@toField":"combinationEntered",
              "@toNode":"OpenVault"
            }
          },
          { "ROUTE":
            {
              "@fromField":"touchTime",
              "@fromNode":"TS",
              "@toField":"openVault",
              "@toNode":"OpenVault"
            }
          },
          { "ROUTE":
            {
              "@fromField":"vaultUnlocked",
              "@fromNode":"OpenVault",
              "@toField":"startTime",
              "@toNode":"Click"
            }
          }
        ]
    }
  }
}

Note that the openVault inputOnly field and the vaultUnlocked outputOnly field are of type SFTime, which allows them to be routed directly to a TouchSensor or TimeSensor.

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.6 Geometric properties

The following IndexedFaceSet (contained in a Shape node) uses all four of the geometric property nodes to specify vertex coordinates, colours per vertex, normals per vertex, and texture coordinates per vertex (note that the material sets the overall transparency), as shown in Figure B.4.

Prototype example

Figure B.4 — Geometric properties

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interchange",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"GeometricProperties.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: simple demonstration of geometric-property nodes."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"11 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.6 Geometric properties"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#GeometricProperties"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/GeometricProperties.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Shape":
            {
              "-geometry":
                { "IndexedFaceSet":
                  {
                    "@coordIndex":[0,1,3,-1,0,2,3,-1],
                    "-coord":
                      { "Coordinate":
                        {
                          "@point":[0,0,0,1,0,0,1,0,-1,0.5,1,0]
                        }
                      },
                    "-color":
                      { "Color":
                        {
                          "@color":[0.2,0.7,0.8,0.5,0,0,0.1,0.8,0.1,0,0,0.7]
                        }
                      },
                    "-normal":
                      { "Normal":
                        {
                          "@vector":[0,0,1,0,0,1,0,0,1,0,0,1]
                        }
                      },
                    "-texCoord":
                      { "TextureCoordinate":
                        {
                          "@point":[0,0,1,0,1,0.4,1,1]
                        }
                      }
                  }
                },
              "-appearance":
                { "Appearance":
                  {
                    "-material":
                      { "Material":
                        {
                          "@transparency":0.5
                        }
                      },
                    "-texture":
                      { "PixelTexture":
                        {
                          "@image":[2,2,1,255,128,128,255]
                        }
                      }
                  }
                }
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.7 Prototypes and alternate representations

X3D has the capability to define new nodes. The following is an example of a new node RefractiveMaterial. This node behaves as a Material node with an added field, indexOfRefraction. The list of URLs for the ExternProtoDeclare are searched in order. If the browser recognizes the URN, urn:inet:foo.com:types:RefractiveMaterial, it may treat it as a native type (or load the implementation). Otherwise, the URL, http://www.myCompany.com/X3DNodes/RefractiveMaterial.json, is used as a backup to ensure that the node is supported on any browsers. See below for the prototype implementation that treats RefractiveMaterial as a Material (and ignores the refractiveIndex field).

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"PrototypesPlus.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: using an externally defined prototype."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"12 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.7 Prototypes and alternate representations"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#PrototyesAndAlternateReps"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/PrototypesPlus.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "#comment":"external protype definition"
          },
          { "ExternProtoDeclare":
            {
              "@name":"RefractiveMaterial",
              "@url":["urn:inet:foo.com:types:RefractiveMaterial","RefractiveMaterial.json#RefractiveMaterial","http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/RefractiveMaterial.json#RefractiveMaterial"],
              "field": [
                {
                  "@name":"ambientIntensity",
                  "@accessType":"inputOutput",
                  "@type":"SFFloat"
                },
                {
                  "@name":"diffuseColor",
                  "@accessType":"inputOutput",
                  "@type":"SFColor"
                },
                {
                  "@name":"specularColor",
                  "@accessType":"inputOutput",
                  "@type":"SFColor"
                },
                {
                  "@name":"emissiveColor",
                  "@accessType":"inputOutput",
                  "@type":"SFColor"
                },
                {
                  "@name":"shininess",
                  "@accessType":"inputOutput",
                  "@type":"SFFloat"
                },
                {
                  "@name":"transparency",
                  "@accessType":"inputOutput",
                  "@type":"SFFloat"
                },
                {
                  "@name":"indexOfRefraction",
                  "@accessType":"inputOutput",
                  "@type":"SFFloat"
                }
              ]
            }
          },
          { "#comment":"renderable scene graph begins here"
          },
          { "Shape":
            {
              "-geometry":
                { "Sphere":
                  {
                  }
                },
              "-appearance":
                { "Appearance":
                  {
                    "-material":
                      { "ProtoInstance":
                        {
                          "@name":"RefractiveMaterial",
                          "fieldValue": [
                            {
                              "@name":"transparency",
                              "@value":0.1
                            },
                            {
                              "@name":"ambientIntensity",
                              "@value":0.2
                            },
                            {
                              "@name":"diffuseColor",
                              "@value":[1,0,0]
                            },
                            {
                              "@name":"indexOfRefraction",
                              "@value":0.4
                            }
                          ]
                        }
                      }
                  }
                }
            }
          }
        ]
    }
  }
}

The URL http://www.myCompany.com/X3DNodes/RefractiveMaterial.json contains the following:

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"RefractiveMaterial.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: create new node RefractiveMaterial for example PrototypesPlus."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"12 May 2016"
          },
          {
            "@name":"reference",
            "@content":"PrototypesPlus.json"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.7 Prototypes and alternate representations"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#PrototyesAndAlternateReps"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/RefractiveMaterial.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "#comment":"Protype definition for external use"
          },
          { "ProtoDeclare":
            {
              "@name":"RefractiveMaterial",
              "ProtoInterface": {
                  "field": [
                    {
                      "@name":"ambientIntensity",
                      "@accessType":"inputOutput",
                      "@type":"SFFloat",
                      "@value":0
                    },
                    {
                      "@name":"diffuseColor",
                      "@accessType":"inputOutput",
                      "@type":"SFColor",
                      "@value":[0.5,0.5,0.5]
                    },
                    {
                      "@name":"specularColor",
                      "@accessType":"inputOutput",
                      "@type":"SFColor",
                      "@value":[0,0,0]
                    },
                    {
                      "@name":"emissiveColor",
                      "@accessType":"inputOutput",
                      "@type":"SFColor",
                      "@value":[0,0,0]
                    },
                    {
                      "@name":"shininess",
                      "@accessType":"inputOutput",
                      "@type":"SFFloat",
                      "@value":0
                    },
                    {
                      "@name":"transparency",
                      "@accessType":"inputOutput",
                      "@type":"SFFloat",
                      "@value":0
                    },
                    {
                      "@name":"indexOfRefraction",
                      "@accessType":"inputOutput",
                      "@type":"SFFloat",
                      "@value":0.1
                    }
                  ]
              },
              "ProtoBody": {
                  "-children":[
                    { "Material":
                      {
                        "@DEF":"RefractiveMaterialNode",
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"ambientIntensity",
                                "@protoField":"ambientIntensity"
                              },
                              {
                                "@nodeField":"diffuseColor",
                                "@protoField":"diffuseColor"
                              },
                              {
                                "@nodeField":"specularColor",
                                "@protoField":"specularColor"
                              },
                              {
                                "@nodeField":"emissiveColor",
                                "@protoField":"emissiveColor"
                              },
                              {
                                "@nodeField":"shininess",
                                "@protoField":"shininess"
                              },
                              {
                                "@nodeField":"transparency",
                                "@protoField":"transparency"
                              }
                            ]
                        }
                      }
                    },
                    { "#comment":"after first node in ProtoDeclare, remainder of nodes do not render"
                    },
                    { "Script":
                      {
                        "@DEF":"RefractionScript",
                        "field": [
                          {
                            "@name":"transparencyInitial",
                            "@accessType":"inputOutput",
                            "@type":"SFFloat"
                          },
                          {
                            "@name":"indexOfRefraction",
                            "@accessType":"inputOutput",
                            "@type":"SFFloat"
                          },
                          {
                            "@name":"transparency_changed",
                            "@accessType":"outputOnly",
                            "@type":"SFFloat"
                          }
                        ],
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"transparencyInitial",
                                "@protoField":"transparency"
                              },
                              {
                                "@nodeField":"indexOfRefraction",
                                "@protoField":"indexOfRefraction"
                              }
                            ]
                        },
                        "#sourceText":[
"ecmascript:",
"function initialize()",
"{",
"    // arbitary example modification of usual node properties",
"    ",
"    var newTransparency = 1.0 - ((1.0 - transparencyInitial) * indexOfRefraction);",
"    Browser.print ('indexOfRefraction=' + indexOfRefraction +",
"         ', transparencyInitial=' + transparencyInitial +",
"         ', transparency_changed=' + newTransparency);",
"    transparency_changed = newTransparency;",
"}",
"",
"function set_transparencyInitial (eventValue)",
"{",
"   // input eventValue received for inputOutput field",
"    transparencyInitial = eventValue;",
"}",
"",
"function set_indexOfRefraction (eventValue)",
"{",
"   // input eventValue received for inputOutput field",
"    indexOfRefraction = eventValue;",
"}"
]
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"transparency_changed",
                        "@fromNode":"RefractionScript",
                        "@toField":"transparency",
                        "@toNode":"RefractiveMaterialNode"
                      }
                    }
                  ]
              }
            }
          }
        ]
    }
  }
}

Note that the name of the new node type, RefractiveMaterial, is not used by the browser to decide if the node is native or not; the URL/URN names determine the node's implementation.

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.8 Anchor

The target parameter can be used by the anchor node to send a request to load a URL into another frame:

"Anchor" : { 
  "@url": [ "http://somehost/somefile.html" ],
  "@parameter": [ "target=name_of_frame" ],
  "-children": [
    {"Shape": {
      "-geometry": {
        "Cylinder": { }
        }
      } 
    }
  ]
}

An Anchor may be used to bind the viewer to a particular viewpoint in a virtual world by specifying a URL ending with #viewpointName, where viewpointName is the DEF name of a Viewpoint node defined in the world. For example:

"Anchor" : { 
  "@url": [ "http://somehost/somefile.html#OverView" ],
  "-children": [
    {"Shape": {
      "-geometry": {
        "Box": { }
        }
      } 
    }
  ]
}

specifies an anchor that puts the viewer in the someScene world bound to the viewpoint named OverView when the box is chosen (note that OverView is the DEF name of the viewpoint, not the value of the viewpoint's description field).

If no world is specified, the current scene is implied. For example:

"Anchor" : { 
  "@url": [ "#Doorway" ],
  "-children": [
    {"Shape": {
      "-geometry": {
        "Sphere": { }
        }
      } 
    }
  ]
}

binds the user's view to the viewpoint with the DEF name Doorway in the current scene.

--- X3D separator bar ---

cube B.9 Directional light

A directional light source illuminates only the objects in its enclosing grouping node. The light illuminates everything within this coordinate system including the objects that precede it in the scene graph as shown in Figure B.5 and in the listing below:

Prototype example

Figure B.5 — Directional light

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interchange",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"DirectionalLight.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: a DirectionalLight source illuminates only the objects in its enclosing grouping node. The light illuminates everything within this coordinate system, including the objects that precede it in the scene graph."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"12 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.9 Directional light"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#DirectionalLight"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/DirectionalLight.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Group":
            {
              "-children":[
                { "Transform":
                  {
                    "@DEF":"UnlitShapeOne",
                    "@translation":[-3.0,0.0,0.0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Box":
                              {
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "@DEF":"App",
                                "-material":
                                  { "Material":
                                    {
                                      "@diffuseColor":[0.8,0.4,0.2]
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                { "Group":
                  {
                    "@DEF":"LitParent",
                    "-children":[
                      { "Transform":
                        {
                          "@DEF":"LitShapeOne",
                          "@translation":[0.0,2.0,0.0],
                          "-children":[
                            { "Shape":
                              {
                                "-geometry":
                                  { "Sphere":
                                    {
                                    }
                                  },
                                "-appearance":
                                  { "Appearance":
                                    {
                                      "@USE":"App"
                                    }
                                  }
                              }
                            }
                          ]
                        }
                      },
                      { "DirectionalLight":
                        {
                        }
                      },
                      { "Transform":
                        {
                          "@DEF":"LitShapeTwo",
                          "@translation":[0.0,-2.0,0.0],
                          "-children":[
                            { "Shape":
                              {
                                "-geometry":
                                  { "Cylinder":
                                    {
                                    }
                                  },
                                "-appearance":
                                  { "Appearance":
                                    {
                                      "@USE":"App"
                                    }
                                  }
                              }
                            }
                          ]
                        }
                      }
                    ]
                  }
                },
                { "Transform":
                  {
                    "@DEF":"UnlitShapeTwo",
                    "@translation":[3.0,0.0,0.0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Cone":
                              {
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "@USE":"App"
                              }
                            }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.10 PointSet

This simple example defines a PointSet composed of 3 points. The first point is red (1 0 0), the second point is green (0 1 0), and the third point is blue (0 0 1). The second PointSet instances the Coordinate node defined in the first PointSet, but defines different colours as shown in Figure B.6:

PointSet example

Figure B.6 — PointSet

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interchange",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"PointSet.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: PointSet demonstration."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"13 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.10 PointSet"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#PointSet"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/PointSet.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Shape":
            {
              "-geometry":
                { "PointSet":
                  {
                    "-color":
                      { "Color":
                        {
                          "@color":[1,0,0,0,1,0,0,0,1]
                        }
                      },
                    "-coord":
                      { "Coordinate":
                        {
                          "@DEF":"mypts",
                          "@point":[0.0,0.0,0.0,2.0,2.0,2.0,3.0,3.0,3.0]
                        }
                      }
                  }
                }
            }
          },
          { "Transform":
            {
              "@translation":[2.0,0.0,0.0],
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "PointSet":
                        {
                          "-color":
                            { "Color":
                              {
                                "@color":[0.5,0.5,0,0.5,0,0.5,0,0.5,0.5]
                              }
                            },
                          "-coord":
                            { "Coordinate":
                              {
                                "@USE":"mypts"
                              }
                            }
                        }
                      }
                  }
                }
              ]
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.11 Level of detail

The LOD node is typically used for switching between different versions of geometry at specified distances from the viewer. However, if the range field is left at its default value, the browser selects the most appropriate child from the list given. It can make this selection based on performance or perceived importance of the object. Children should be listed with most detailed version first just as for the normal case. This "performance LOD" feature can be combined with the normal LOD function to give the browser a selection of children from which to choose at each distance.

In this example, the scene consists of a small reference sphere and an LOD node which has two ranges and three children. The browser is free to choose from three Shape choices representing either a detailed or a less-detailed version of the object when the viewer is closer than 10 meters (as measured in the coordinate space of the LOD). The browser should display the less detailed version of the object (box) if the viewer is between 10 and 50 metres, the sphere when closer than 10 metres and should display nothing, the empty Shape last child, if the viewer is farther than 50 meters. Browsers should try to honour the hints given by authors, and authors should try to give browsers as much freedom as they can to choose levels of detail based on performance. Figure B.7 shows a composite of three images captured at three increasing distances from the object.

LevelOfDetail example

Figure B.7 — Level of detail

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"LevelOfDetail.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: LevelOfDetail demonstration."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"13 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.11 Level of detail"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#LevelOfDetail"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/LevelOfDetail.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Viewpoint":
            {
              "@description":"Start",
              "@position":[0,0,25]
            }
          },
          { "LOD":
            {
              "@range":[10.0,50.0],
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "Sphere":
                        {
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "@DEF":"DefaultAppearance",
                          "-material":
                            { "Material":
                              {
                              }
                            }
                        }
                      }
                  }
                },
                { "Shape":
                  {
                    "-geometry":
                      { "Box":
                        {
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "@USE":"DefaultAppearance"
                        }
                      }
                  }
                },
                { "Shape":
                  {
                  }
                }
              ]
            }
          }
        ]
    }
  }
}

For best results, ranges should be specified only where necessary and LOD nodes should be nested with and without ranges.

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.12 Colour interpolator

This example interpolates from red to green to blue in a 10 second cycle. Figure B.8 presents a video of this scene lasting about 12 seconds, i.e. just over a complete cycle.

Editor's Note: The use of video is almost certainly not acceptable. It's replacement should probably be a sequence of images. The video has been left in for now (Note: the quality is poor) to better illustrate the example.

Figure B.8 — Colour interpolator

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interchange",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"ColorInterpolator.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: ColorInterpolator demonstration modifies Material color."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"13 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.12 Colour interpolator"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#ColourInterpolator"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/ColorInterpolator.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "ColorInterpolator":
            {
              "@DEF":"myColor",
              "@key":[0.0,0.333,0.666,1.0],
              "@keyValue":[1,0,0,0,1,0,0,0,1,1,0,0]
            }
          },
          { "TimeSensor":
            {
              "@DEF":"myClock",
              "@cycleInterval":10.0,
              "@loop":true
            }
          },
          { "Shape":
            {
              "-geometry":
                { "Sphere":
                  {
                  }
                },
              "-appearance":
                { "Appearance":
                  {
                    "-material":
                      { "Material":
                        {
                          "@DEF":"myMaterial"
                        }
                      }
                  }
                }
            }
          },
          { "ROUTE":
            {
              "@fromField":"fraction_changed",
              "@fromNode":"myClock",
              "@toField":"set_fraction",
              "@toNode":"myColor"
            }
          },
          { "ROUTE":
            {
              "@fromField":"value_changed",
              "@fromNode":"myColor",
              "@toField":"diffuseColor",
              "@toNode":"myMaterial"
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.13 TimeSensor

B.13.1 Introduction

The TimeSensor is very flexible. The following are some of the many ways in which it can be used:

  1. A TimeSensor can be triggered to run continuously by setting cycleInterval > 0, and loop = true, and then routing a time output from another node that triggers the loop (e.g.,, the touchTime field of a TouchSensor can be routed to the TimeSensor's startTime to start the TimeSensor running).
  2. A TimeSensor can be made to run continuously upon reading by setting cycleInterval > 0, startTime > 0, stopTime = 0, and loop = true.

B.13.2 Click to animate

This first example animates a box when the user clicks on it. Figure B.9 presents a video of this scene.

Figure B.9 — Click to animate

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interactive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"ClickToAnimate.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: click to animate a Box."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"14 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.13.2 Click to animate"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#TimeSensorClickToAnimate"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/ClickToAnimate.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Transform":
            {
              "@DEF":"XForm",
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "Box":
                        {
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[1.0,0.0,0.0]
                              }
                            }
                        }
                      }
                  }
                },
                { "TouchSensor":
                  {
                    "@DEF":"Clicker",
                    "@description":"click to animate"
                  }
                },
                { "TimeSensor":
                  {
                    "@DEF":"TimeSource",
                    "@cycleInterval":2.0
                  }
                },
                { "OrientationInterpolator":
                  {
                    "@DEF":"Animation",
                    "@key":[0.0,0.33,0.66,1.0],
                    "@keyValue":[0.0,1.0,0.0,0.0,0.0,1.0,0.0,2.1,0.0,1.0,0.0,4.2,0.0,1.0,0.0,0.0]
                  }
                }
              ]
            }
          },
          { "ROUTE":
            {
              "@fromField":"touchTime",
              "@fromNode":"Clicker",
              "@toField":"startTime",
              "@toNode":"TimeSource"
            }
          },
          { "ROUTE":
            {
              "@fromField":"fraction_changed",
              "@fromNode":"TimeSource",
              "@toField":"set_fraction",
              "@toNode":"Animation"
            }
          },
          { "ROUTE":
            {
              "@fromField":"value_changed",
              "@fromNode":"Animation",
              "@toField":"rotation",
              "@toNode":"XForm"
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

B.13.3 Alarm clock

The second example plays chimes once an hour:

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"AlarmClock.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: alarm clock plays chimes once each interval."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"14 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.13.3 Alarm clock"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#AlarmClock"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/AlarmClock.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Group":
            {
              "-children":[
                { "TimeSensor":
                  {
                    "@DEF":"Hour",
                    "@cycleInterval":5.0,
                    "@loop":true
                  }
                },
                { "#comment":"cycleInterval reduced from 3600 seconds for demonstration purposes..."
                },
                { "Sound":
                  {
                    "-source":
                      { "AudioClip":
                        {
                          "@DEF":"Sounder",
                          "@description":"chime",
                          "@url":["click.wav","http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/click.wav"]
                        }
                      }
                  }
                }
              ]
            }
          },
          { "ROUTE":
            {
              "@fromField":"cycleTime",
              "@fromNode":"Hour",
              "@toField":"startTime",
              "@toNode":"Sounder"
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.14 Shuttles and pendulums

Shuttles and pendulums are great building blocks for composing interesting animations. This shuttle translates its children back and forth along the X axis, from -1 to 1 (by default). The distance field can be used to change this default. The pendulum rotates its children about the Z axis, from 0 to 3.14159 radians and back again (by default). The maxAngle field can be used to change this default. Figure B.10 presents a video of this scene.

Figure B.10 — Shuttle and pendulum

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"ShuttlesAndPendulums.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: animation of shuttle and pendulum prototype nodes."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"15 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.14 Shuttles and pendulums"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#ShuttlesAndPendulums"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/ShuttlesAndPendulums.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "ProtoDeclare":
            {
              "@name":"Shuttle",
              "ProtoInterface": {
                  "field": [
                    {
                      "@name":"rate",
                      "@accessType":"initializeOnly",
                      "@type":"SFTime",
                      "@value":1
                    },
                    {
                      "@name":"distance",
                      "@accessType":"initializeOnly",
                      "@type":"SFFloat",
                      "@value":1
                    },
                    {
                      "@name":"children",
                      "@accessType":"initializeOnly",
                      "@type":"MFNode",
                      "-children":[
                        { "#comment":"initial value is empty node array"
                        }
                      ]
                    },
                    {
                      "@name":"startTime",
                      "@accessType":"inputOutput",
                      "@type":"SFTime",
                      "@value":0
                    },
                    {
                      "@name":"stopTime",
                      "@accessType":"inputOutput",
                      "@type":"SFTime",
                      "@value":0
                    },
                    {
                      "@name":"loop",
                      "@accessType":"initializeOnly",
                      "@type":"SFBool",
                      "@value":true
                    }
                  ]
              },
              "ProtoBody": {
                  "-children":[
                    { "Transform":
                      {
                        "@DEF":"F",
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"children",
                                "@protoField":"children"
                              }
                            ]
                        }
                      }
                    },
                    { "#comment":"after first node in ProtoDeclare, remainder of nodes do not render"
                    },
                    { "TimeSensor":
                      {
                        "@DEF":"T",
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"cycleInterval",
                                "@protoField":"rate"
                              },
                              {
                                "@nodeField":"startTime",
                                "@protoField":"startTime"
                              },
                              {
                                "@nodeField":"stopTime",
                                "@protoField":"stopTime"
                              },
                              {
                                "@nodeField":"loop",
                                "@protoField":"loop"
                              }
                            ]
                        }
                      }
                    },
                    { "Script":
                      {
                        "@DEF":"S",
                        "field": [
                          {
                            "@name":"distance",
                            "@accessType":"initializeOnly",
                            "@type":"SFFloat"
                          },
                          {
                            "@name":"position",
                            "@accessType":"outputOnly",
                            "@type":"MFVec3f"
                          }
                        ],
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"distance",
                                "@protoField":"distance"
                              }
                            ]
                        },
                        "#sourceText":[
"ecmascript:",
"            function initialize () {     // constructor:setup interpolator",
"              pos1 = new SFVec3f(-distance, 0, 0);",
"              pos2 = new SFVec3f(distance, 0, 0);",
"              position = new MFVec3f(pos1, pos2, pos1);",
"            }"
]
                      }
                    },
                    { "PositionInterpolator":
                      {
                        "@DEF":"I",
                        "@key":[0,0.5,1],
                        "@keyValue":[-1,0,0,1,0,0,-1,0,0]
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"fraction_changed",
                        "@fromNode":"T",
                        "@toField":"set_fraction",
                        "@toNode":"I"
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"value_changed",
                        "@fromNode":"I",
                        "@toField":"translation",
                        "@toNode":"F"
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"position",
                        "@fromNode":"S",
                        "@toField":"keyValue",
                        "@toNode":"I"
                      }
                    }
                  ]
              }
            }
          },
          { "ProtoDeclare":
            {
              "@name":"Pendulum",
              "ProtoInterface": {
                  "field": [
                    {
                      "@name":"rate",
                      "@accessType":"initializeOnly",
                      "@type":"SFTime",
                      "@value":1
                    },
                    {
                      "@name":"maxAngle",
                      "@accessType":"initializeOnly",
                      "@type":"SFFloat",
                      "@value":3.14159
                    },
                    {
                      "@name":"children",
                      "@accessType":"initializeOnly",
                      "@type":"MFNode",
                      "-children":[
                        { "#comment":"initial value is empty node array"
                        }
                      ]
                    },
                    {
                      "@name":"startTime",
                      "@accessType":"inputOutput",
                      "@type":"SFTime",
                      "@value":0
                    },
                    {
                      "@name":"stopTime",
                      "@accessType":"inputOutput",
                      "@type":"SFTime",
                      "@value":0
                    },
                    {
                      "@name":"loop",
                      "@accessType":"initializeOnly",
                      "@type":"SFBool",
                      "@value":true
                    }
                  ]
              },
              "ProtoBody": {
                  "-children":[
                    { "Transform":
                      {
                        "@DEF":"FF",
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"children",
                                "@protoField":"children"
                              }
                            ]
                        }
                      }
                    },
                    { "#comment":"after first node in ProtoDeclare, remainder of nodes do not render"
                    },
                    { "TimeSensor":
                      {
                        "@DEF":"TT",
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"cycleInterval",
                                "@protoField":"rate"
                              },
                              {
                                "@nodeField":"startTime",
                                "@protoField":"startTime"
                              },
                              {
                                "@nodeField":"stopTime",
                                "@protoField":"stopTime"
                              },
                              {
                                "@nodeField":"loop",
                                "@protoField":"loop"
                              }
                            ]
                        }
                      }
                    },
                    { "Script":
                      {
                        "@DEF":"SS",
                        "field": [
                          {
                            "@name":"maxAngle",
                            "@accessType":"initializeOnly",
                            "@type":"SFFloat"
                          },
                          {
                            "@name":"rotation",
                            "@accessType":"outputOnly",
                            "@type":"MFRotation"
                          }
                        ],
                        "IS": {
                            "connect": [
                              {
                                "@nodeField":"maxAngle",
                                "@protoField":"maxAngle"
                              }
                            ]
                        },
                        "#sourceText":[
"ecmascript:",
"            function initialize() {     // constructor: setup interpolator",
"              rot1 = new SFRotation(0, 0, 1, 0);",
"              rot2 = new SFRotation(0, 0, 1, maxAngle/2);",
"              rot3 = new SFRotation(0, 0, 1, maxAngle);",
"              rotation = new MFRotation(rot1, rot2, rot3, rot2, rot1);",
"            }"
]
                      }
                    },
                    { "OrientationInterpolator":
                      {
                        "@DEF":"II",
                        "@key":[0,0.25,0.5,0.75,1],
                        "@keyValue":[0,0,1,0,0,0,1,1.57,0,0,1,3.14,0,0,1,1.57,0,0,1,0]
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"fraction_changed",
                        "@fromNode":"TT",
                        "@toField":"set_fraction",
                        "@toNode":"II"
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"value_changed",
                        "@fromNode":"II",
                        "@toField":"rotation",
                        "@toNode":"FF"
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"rotation",
                        "@fromNode":"SS",
                        "@toField":"keyValue",
                        "@toNode":"II"
                      }
                    }
                  ]
              }
            }
          },
          { "Transform":
            {
              "@translation":[-3,0,0],
              "-children":[
                { "ProtoInstance":
                  {
                    "@name":"Pendulum",
                    "fieldValue": [
                      {
                        "@name":"rate",
                        "@value":3
                      },
                      {
                        "@name":"maxAngle",
                        "@value":6.28
                      },
                      {
                        "@name":"children",
                        "-children":[
                          { "Shape":
                            {
                              "-geometry":
                                { "Cylinder":
                                  {
                                    "@height":5
                                  }
                                },
                              "-appearance":
                                { "Appearance":
                                  {
                                    "-material":
                                      { "Material":
                                        {
                                          "@diffuseColor":[0.8,0.1,0]
                                        }
                                      }
                                  }
                                }
                            }
                          }
                        ]
                      }
                    ]
                  }
                }
              ]
            }
          },
          { "Transform":
            {
              "-children":[
                { "ProtoInstance":
                  {
                    "@name":"Shuttle",
                    "fieldValue": [
                      {
                        "@name":"rate",
                        "@value":2
                      },
                      {
                        "@name":"children",
                        "-children":[
                          { "Shape":
                            {
                              "-geometry":
                                { "Sphere":
                                  {
                                  }
                                },
                              "-appearance":
                                { "Appearance":
                                  {
                                    "-material":
                                      { "Material":
                                        {
                                          "@diffuseColor":[0.1,0.8,0]
                                        }
                                      }
                                  }
                                }
                            }
                          }
                        ]
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

These nodes can be used to do a continuous animation when loop is true. When loop is false they can perform a single cycle under control of the startTime and stopTime fields. The rate field controls the speed of the animation. The children field holds the children to be animated.

--- X3D separator bar ---

cube B.15 Robot

This example is a simple implementation of a robot. This robot has very simple body parts: a cube for his head, a sphere for his body and cylinders for arms (he hovers so he has no feet!). He is something of a sentry in that he walks forward and backwards along a straight path. He does this whenever the viewer is near. This makes use of the prototypes in the example B.14 Shuttles and pendulums. Figure B.11 presents a video of this scene.

Figure B.11 — Robot

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"Robot.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: Robot. Seek or zoom in towards the robot to start a simple animation sequence."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"20 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.15 Robot"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#Robot"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/Robot.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"TODO",
            "@content":"check Pendulum url gets corrected by X3dDecorator"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "ExternProtoDeclare":
            {
              "@name":"Shuttle",
              "@url":["ShuttlesAndPendulums.json#Shuttle","http://www.web3d.org/x3d/content/examples/Basic/X3DSpecifications/ShuttlesAndPendulums.json#Shuttle"],
              "field": [
                {
                  "@name":"rate",
                  "@accessType":"initializeOnly",
                  "@type":"SFTime"
                },
                {
                  "@name":"distance",
                  "@accessType":"initializeOnly",
                  "@type":"SFFloat"
                },
                {
                  "@name":"children",
                  "@accessType":"initializeOnly",
                  "@type":"MFNode"
                },
                {
                  "@name":"startTime",
                  "@accessType":"inputOutput",
                  "@type":"SFTime"
                },
                {
                  "@name":"stopTime",
                  "@accessType":"inputOutput",
                  "@type":"SFTime"
                },
                {
                  "@name":"loop",
                  "@accessType":"initializeOnly",
                  "@type":"SFBool"
                }
              ]
            }
          },
          { "ExternProtoDeclare":
            {
              "@name":"Pendulum",
              "@url":["ShuttlesAndPendulums.json#Pendulum","http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/ShuttlesAndPendulums.json#Pendulum"],
              "field": [
                {
                  "@name":"rate",
                  "@accessType":"initializeOnly",
                  "@type":"SFTime"
                },
                {
                  "@name":"maxAngle",
                  "@accessType":"initializeOnly",
                  "@type":"SFFloat"
                },
                {
                  "@name":"children",
                  "@accessType":"initializeOnly",
                  "@type":"MFNode"
                },
                {
                  "@name":"startTime",
                  "@accessType":"inputOutput",
                  "@type":"SFTime"
                },
                {
                  "@name":"stopTime",
                  "@accessType":"inputOutput",
                  "@type":"SFTime"
                },
                {
                  "@name":"loop",
                  "@accessType":"initializeOnly",
                  "@type":"SFBool"
                }
              ]
            }
          },
          { "NavigationInfo":
            {
              "@speed":20,
              "@type":["WALK","ANY"]
            }
          },
          { "Viewpoint":
            {
              "@description":"Watch Robot",
              "@position":[0,0,150]
            }
          },
          { "ProximitySensor":
            {
              "@DEF":"Near",
              "@size":[200,200,200]
            }
          },
          { "ProtoInstance":
            {
              "@name":"Shuttle",
              "@DEF":"WALK",
              "fieldValue": [
                {
                  "@name":"stopTime",
                  "@value":1
                },
                {
                  "@name":"rate",
                  "@value":10
                },
                {
                  "@name":"distance",
                  "@value":20
                },
                {
                  "@name":"children",
                  "-children":[
                    { "Transform":
                      {
                        "@rotation":[0,1,0,1.57],
                        "-children":[
                          { "Shape":
                            {
                              "-appearance":
                                { "Appearance":
                                  {
                                    "@DEF":"A",
                                    "-material":
                                      { "Material":
                                        {
                                          "@diffuseColor":[0,0.5,0.7]
                                        }
                                      }
                                  }
                                },
                              "-children":[
                                { "#comment":"head"
                                }
                              ],
                              "-geometry":
                                { "Box":
                                  {
                                  }
                                }
                            }
                          },
                          { "Transform":
                            {
                              "@scale":[1,5,1],
                              "@translation":[0,-5,0],
                              "-children":[
                                { "Shape":
                                  {
                                    "-appearance":
                                      { "Appearance":
                                        {
                                          "@USE":"A"
                                        }
                                      },
                                    "-children":[
                                      { "#comment":"body"
                                      }
                                    ],
                                    "-geometry":
                                      { "Sphere":
                                        {
                                        }
                                      }
                                  }
                                }
                              ]
                            }
                          },
                          { "Transform":
                            {
                              "@rotation":[0,1,0,1.57],
                              "@translation":[1.5,0,0],
                              "-children":[
                                { "ProtoInstance":
                                  {
                                    "@name":"Pendulum",
                                    "@DEF":"Arm",
                                    "fieldValue": [
                                      {
                                        "@name":"stopTime",
                                        "@value":1
                                      },
                                      {
                                        "@name":"rate",
                                        "@value":1
                                      },
                                      {
                                        "@name":"maxAngle",
                                        "@value":0.52
                                      },
                                      {
                                        "@name":"children",
                                        "-children":[
                                          { "Transform":
                                            {
                                              "@translation":[0,-3,0],
                                              "-children":[
                                                { "Shape":
                                                  {
                                                    "-appearance":
                                                      { "Appearance":
                                                        {
                                                          "@USE":"A"
                                                        }
                                                      },
                                                    "-geometry":
                                                      { "Cylinder":
                                                        {
                                                          "@height":4,
                                                          "@radius":0.5
                                                        }
                                                      }
                                                  }
                                                }
                                              ]
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                }
                              ]
                            }
                          },
                          { "Transform":
                            {
                              "@rotation":[0,-1,0,1.57],
                              "@translation":[-1.5,0,0],
                              "-children":[
                                { "ProtoInstance":
                                  {
                                    "@name":"Pendulum",
                                    "@USE":"Arm"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              ]
            }
          },
          { "ROUTE":
            {
              "@fromField":"enterTime",
              "@fromNode":"Near",
              "@toField":"startTime",
              "@toNode":"WALK"
            }
          },
          { "ROUTE":
            {
              "@fromField":"enterTime",
              "@fromNode":"Near",
              "@toField":"startTime",
              "@toNode":"Arm"
            }
          },
          { "ROUTE":
            {
              "@fromField":"exitTime",
              "@fromNode":"Near",
              "@toField":"stopTime",
              "@toNode":"WALK"
            }
          },
          { "ROUTE":
            {
              "@fromField":"exitTime",
              "@fromNode":"Near",
              "@toField":"stopTime",
              "@toNode":"Arm"
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

Move closer to the robot to start the animation.

--- X3D separator bar ---

cube B.16 Chopper

This example of a helicopter demonstrates how to do simple animation triggered by a TouchSensor. It uses an ExternProtoDeclare to include a Rotor node from the Internet which does the actual animation.

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"Chopper.json"
          },
          {
            "@name":"description",
            "@content":"Rotor node provides animation and serves as an ExternProtoDeclare example"
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"20 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.16 Chopper"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#Chopper"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/Chopper.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "ExternProtoDeclare":
            {
              "@name":"Rotor",
              "@url":["Rotor.json#Rotor","http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/Rotor.json#Rotor"],
              "field": [
                {
                  "@name":"rate",
                  "@accessType":"initializeOnly",
                  "@type":"SFTime"
                },
                {
                  "@name":"children",
                  "@accessType":"initializeOnly",
                  "@type":"MFNode"
                },
                {
                  "@name":"startTime",
                  "@accessType":"inputOutput",
                  "@type":"SFTime"
                },
                {
                  "@name":"stopTime",
                  "@accessType":"inputOutput",
                  "@type":"SFTime"
                }
              ]
            }
          },
          { "ProtoDeclare":
            {
              "@name":"Chopper",
              "ProtoInterface": {
                  "field": [
                    {
                      "@name":"rotorSpeed",
                      "@accessType":"initializeOnly",
                      "@type":"SFTime",
                      "@value":1
                    }
                  ]
              },
              "ProtoBody": {
                  "-children":[
                    { "Group":
                      {
                        "-children":[
                          { "TouchSensor":
                            {
                              "@DEF":"Touch",
                              "@description":"touch to toggle rotor rotation"
                            }
                          },
                          { "Inline":
                            {
                              "@url":["ChopperBody.json","http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/ChopperBody.json"]
                            }
                          },
                          { "ProtoInstance":
                            {
                              "@name":"Rotor",
                              "@DEF":"Top",
                              "fieldValue": [
                                {
                                  "@name":"stopTime",
                                  "@value":1
                                },
                                {
                                  "@name":"children",
                                  "-children":[
                                    { "Inline":
                                      {
                                        "@url":["ChopperRotor.json","http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/ChopperRotor.json"]
                                      }
                                    }
                                  ]
                                }
                              ],
                              "IS": {
                                  "connect": [
                                    {
                                      "@nodeField":"rate",
                                      "@protoField":"rotorSpeed"
                                    }
                                  ]
                              }
                            }
                          }
                        ]
                      }
                    },
                    { "#comment":"after first node in ProtoDeclare, remainder of nodes do not render"
                    },
                    { "Script":
                      {
                        "@DEF":"RotorScript",
                        "field": [
                          {
                            "@name":"startOrStopEngine",
                            "@accessType":"inputOnly",
                            "@type":"SFTime"
                          },
                          {
                            "@name":"startEngine",
                            "@accessType":"outputOnly",
                            "@type":"SFTime"
                          },
                          {
                            "@name":"stopEngine",
                            "@accessType":"outputOnly",
                            "@type":"SFTime"
                          },
                          {
                            "@name":"engineStarted",
                            "@accessType":"initializeOnly",
                            "@type":"SFBool",
                            "@value":false
                          }
                        ],
                        "#sourceText":[
"ecmascript:",
"",
"function startOrStopEngine(value)",
"{",
"\t// start or stop engine:",
"\tif (!engineStarted)",
"\t{",
"\t\tstartEngine = value;",
"\t\tengineStarted = true;",
"\t}",
"\telse",
"\t{",
"\t\tstopEngine = value;",
"\t\tengineStarted = false;",
"\t}",
"}"
]
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"touchTime",
                        "@fromNode":"Touch",
                        "@toField":"startOrStopEngine",
                        "@toNode":"RotorScript"
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"startEngine",
                        "@fromNode":"RotorScript",
                        "@toField":"startTime",
                        "@toNode":"Top"
                      }
                    },
                    { "ROUTE":
                      {
                        "@fromField":"stopEngine",
                        "@fromNode":"RotorScript",
                        "@toField":"stopTime",
                        "@toNode":"Top"
                      }
                    }
                  ]
              }
            }
          },
          { "Viewpoint":
            {
              "@description":"Example16",
              "@position":[0,0,5]
            }
          },
          { "Group":
            {
              "-children":[
                { "ProtoInstance":
                  {
                    "@name":"Chopper",
                    "@DEF":"MikesChopper"
                  }
                }
              ]
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.17 Guided tour

X3D includes the capability of animating the viewer's camera. This is useful for things such as guided tours, merry-go-round rides, and transportation devices such as buses and elevators. The next two examples show ways to use this feature.

This first example is a simple guided tour through the world. Upon entry, a guide orb hovers in front of the viewer. Click on this and a tour through the world begins. The orb follows the user around on his tour. A ProximitySensor ensures that the tour is started only if the user is close to the initial starting point. Note that this is done without scripts thanks to the touchTime output of the TouchSensor.

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interactive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"GuidedTour.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: provides control of the viewpoint through use of a script. This is useful for things such as guided tours, merry-go-round rides, and transportation devices such as buses and elevators. These next two examples show a couple of ways to use this feature. This example is a simple guided tour through the world. Upon entry, a guide orb hovers in front of the viewer. Click on this and a tour through the world begins. The orb follows the user around on his tour. A ProximitySensor ensures that the tour is started only if the user is close to the initial starting point. Note that this is done without scripts thanks to the touchTime output of the TouchSensor."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"21 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.17 Guided tour"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#GuidedTour"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/GuidedTour.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "Group":
            {
              "-children":[
                { "Transform":
                  {
                    "@translation":[0.0,-1.0,0.0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Box":
                              {
                                "@size":[30.0,0.2,30.0]
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                { "Transform":
                  {
                    "@translation":[-1.0,0.0,0.0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Cone":
                              {
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                      "@diffuseColor":[0.5,0.8,0.0]
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                { "Transform":
                  {
                    "@translation":[1.0,0.0,0.0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Cylinder":
                              {
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                      "@diffuseColor":[0.0,0.2,0.7]
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                { "Transform":
                  {
                    "@DEF":"GuideTransform",
                    "-children":[
                      { "Viewpoint":
                        {
                          "@DEF":"TourGuide",
                          "@description":"Tour Guide",
                          "@jump":false
                        }
                      },
                      { "ProximitySensor":
                        {
                          "@DEF":"ProxSensor",
                          "@size":[50.0,50.0,50.0]
                        }
                      },
                      { "TouchSensor":
                        {
                          "@DEF":"StartTour",
                          "@description":"click to start guided tour"
                        }
                      },
                      { "Transform":
                        {
                          "@translation":[0.6,0.4,8.0],
                          "-children":[
                            { "Shape":
                              {
                                "-geometry":
                                  { "Sphere":
                                    {
                                      "@radius":0.2
                                    }
                                  },
                                "-appearance":
                                  { "Appearance":
                                    {
                                      "-material":
                                        { "Material":
                                          {
                                            "@diffuseColor":[1.0,0.6,0.0]
                                          }
                                        }
                                    }
                                  }
                              }
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          },
          { "PositionInterpolator":
            {
              "@DEF":"GuidePI",
              "@key":[0.0,0.2,0.3,0.5,0.6,0.8,0.9,1.0],
              "@keyValue":[0.0,0.0,0.0,0.0,0.0,-5.0,2.0,0.0,-5.0,2.0,6.0,-15.0,-4.0,6.0,-15.0,-4.0,0.0,-5.0,0.0,0.0,-5.0,0.0,0.0,0.0]
            }
          },
          { "OrientationInterpolator":
            {
              "@DEF":"GuideRI",
              "@key":[0.0,0.2,0.3,0.5,0.6,0.8,0.9,1.0],
              "@keyValue":[0.0,1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,1.2,0.0,1.0,0.0,3.3,0.0,1.0,0.0,3.5,0.0,1.0,0.0,5.0,0.0,1.0,0.0,0.0,0.0,1.0,0.0,0.0]
            }
          },
          { "TimeSensor":
            {
              "@DEF":"TS",
              "@cycleInterval":30.0
            }
          },
          { "ROUTE":
            {
              "@fromField":"isActive",
              "@fromNode":"ProxSensor",
              "@toField":"enabled",
              "@toNode":"StartTour"
            }
          },
          { "ROUTE":
            {
              "@fromField":"touchTime",
              "@fromNode":"StartTour",
              "@toField":"startTime",
              "@toNode":"TS"
            }
          },
          { "ROUTE":
            {
              "@fromField":"isActive",
              "@fromNode":"TS",
              "@toField":"set_bind",
              "@toNode":"TourGuide"
            }
          },
          { "ROUTE":
            {
              "@fromField":"fraction_changed",
              "@fromNode":"TS",
              "@toField":"set_fraction",
              "@toNode":"GuidePI"
            }
          },
          { "ROUTE":
            {
              "@fromField":"fraction_changed",
              "@fromNode":"TS",
              "@toField":"set_fraction",
              "@toNode":"GuideRI"
            }
          },
          { "ROUTE":
            {
              "@fromField":"value_changed",
              "@fromNode":"GuidePI",
              "@toField":"translation",
              "@toNode":"GuideTransform"
            }
          },
          { "ROUTE":
            {
              "@fromField":"value_changed",
              "@fromNode":"GuideRI",
              "@toField":"rotation",
              "@toNode":"GuideTransform"
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.18 Elevator

This is another example of animating the camera by depicting an elevator to ease access to a multistorey building. For this example, a two storey building is shown and it is assumed that the elevator is already at the ground floor. To go up, the user just steps onto the elevator platform. A ProximitySensor fires and starts the elevator up automatically. Additional features such as call buttons for outside the elevator, elevator doors, and floor selector buttons could be added to make the elevator easier to use.

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Interactive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"Elevator.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: example of animating the camera by depicting an elevator to ease access to a multi-story building. For this example, a 2 story building is shown and it is assumed that the elevator is already at the ground floor. To go up, the user just steps onto the elevator platform. A ProximitySensor fires and starts the elevator up automatically. Additional features such as call buttons for outside the elevator, elevator doors, and floor selector buttons could be added to make the elevator easier to use."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"Image",
            "@content":"ElevatorAnimation.png"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"21 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.18 Elevator"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#Elevator"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/Elevator.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "NavigationInfo":
            {
              "@type":["WALK","ANY"]
            }
          },
          { "Transform":
            {
              "@translation":[0.0,0.0,-3.5],
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "Cone":
                        {
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[0.0,1.0,0.0]
                              }
                            }
                        }
                      }
                  }
                }
              ]
            }
          },
          { "Transform":
            {
              "@translation":[0.0,4.0,-3.5],
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "Cone":
                        {
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[1.0,0.0,0.0]
                              }
                            }
                        }
                      }
                  }
                }
              ]
            }
          },
          { "Transform":
            {
              "@translation":[0.0,8.0,-3.5],
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "Cone":
                        {
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[0.0,0.0,1.0]
                              }
                            }
                        }
                      }
                  }
                }
              ]
            }
          },
          { "Group":
            {
              "-children":[
                { "Transform":
                  {
                    "@DEF":"ETransform",
                    "-children":[
                      { "Viewpoint":
                        {
                          "@DEF":"EViewpoint",
                          "@description":"Elevator Viewpoint",
                          "@jump":false
                        }
                      },
                      { "ProximitySensor":
                        {
                          "@DEF":"EProximity",
                          "@size":[2.0,5.0,5.0]
                        }
                      },
                      { "Transform":
                        {
                          "@translation":[0.0,-1.0,0.0],
                          "-children":[
                            { "Shape":
                              {
                                "-geometry":
                                  { "Box":
                                    {
                                      "@size":[2.0,0.2,5.0]
                                    }
                                  },
                                "-appearance":
                                  { "Appearance":
                                    {
                                      "-material":
                                        { "Material":
                                          {
                                          }
                                        }
                                    }
                                  }
                              }
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          },
          { "PositionInterpolator":
            {
              "@DEF":"ElevatorPI",
              "@key":[0.0,1.0],
              "@keyValue":[0.0,0.0,0.0,0.0,8.0,0.0]
            }
          },
          { "TimeSensor":
            {
              "@DEF":"TS",
              "@cycleInterval":10.0
            }
          },
          { "ROUTE":
            {
              "@fromField":"enterTime",
              "@fromNode":"EProximity",
              "@toField":"startTime",
              "@toNode":"TS"
            }
          },
          { "ROUTE":
            {
              "@fromField":"isActive",
              "@fromNode":"TS",
              "@toField":"set_bind",
              "@toNode":"EViewpoint"
            }
          },
          { "ROUTE":
            {
              "@fromField":"fraction_changed",
              "@fromNode":"TS",
              "@toField":"set_fraction",
              "@toNode":"ElevatorPI"
            }
          },
          { "ROUTE":
            {
              "@fromField":"value_changed",
              "@fromNode":"ElevatorPI",
              "@toField":"translation",
              "@toNode":"ETransform"
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

--- X3D separator bar ---

cube B.19 Execution model

This example illustrates the execution model example described in 4.4.8.3 Execution model in ISO/IEC 19775-1.

{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"ExecutionModel.json"
          },
          {
            "@name":"description",
            "@content":"X3D encodings example: execution model demonstrated. Click ball to see script-generated text appear."
          },
          {
            "@name":"creators",
            "@content":"Don Brutzman and Joe Williams"
          },
          {
            "@name":"created",
            "@content":"1 June 2002"
          },
          {
            "@name":"modified",
            "@content":"21 May 2016"
          },
          {
            "@name":"specificationSection",
            "@content":"X3D encodings, ISO/IEC 19776, Part 5: JSON encoding, Annex B.19 Execution model"
          },
          {
            "@name":"specificationUrl",
            "@content":"http://www.web3d.org/documents/specifications/19776-5/V3.3/Part05/examples.html#ExecutionModel"
          },
          {
            "@name":"identifier",
            "@content":"http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/ExecutionModel.json"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://savage.nps.edu/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"18 April 2016"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, http://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"warning",
            "@content":"An experimental version of X3D JSON encoding is used for this scene.  Status online at http://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "TouchSensor":
            {
              "@DEF":"TS",
              "@description":"click to animate"
            }
          },
          { "Script":
            {
              "@DEF":"Script1",
              "field": [
                {
                  "@name":"touchTime",
                  "@accessType":"inputOnly",
                  "@type":"SFTime"
                },
                {
                  "@name":"toScript2",
                  "@accessType":"outputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"toScript3",
                  "@accessType":"outputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"string",
                  "@accessType":"outputOnly",
                  "@type":"SFString"
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function touchTime() {",
"        toScript2 = true;",
"      }",
"      function eventsProcessed() {",
"        string = 'Script1.eventsProcessed';",
"        toScript3 = true;",
"      }"
]
            }
          },
          { "Script":
            {
              "@DEF":"Script2",
              "field": [
                {
                  "@name":"fromScript1",
                  "@accessType":"inputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"toScript4",
                  "@accessType":"outputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"string",
                  "@accessType":"outputOnly",
                  "@type":"SFString"
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function fromScript1() {",
"      }",
"      function eventsProcessed() {",
"        string = 'Script2.eventsProcessed';",
"        toScript4 = true;",
"      }"
]
            }
          },
          { "Script":
            {
              "@DEF":"Script3",
              "field": [
                {
                  "@name":"fromScript1",
                  "@accessType":"inputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"toScript5",
                  "@accessType":"outputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"toScript6",
                  "@accessType":"outputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"string",
                  "@accessType":"outputOnly",
                  "@type":"SFString"
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function fromScript1() {",
"        toScript5 = true;",
"      }",
"      function eventsProcessed() {",
"        string = 'Script3.eventsProcessed';",
"        toScript6 = true;",
"      }"
]
            }
          },
          { "Script":
            {
              "@DEF":"Script4",
              "field": [
                {
                  "@name":"fromScript2",
                  "@accessType":"inputOnly",
                  "@type":"SFBool"
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function fromScript2() {",
"      }"
]
            }
          },
          { "Script":
            {
              "@DEF":"Script5",
              "field": [
                {
                  "@name":"fromScript3",
                  "@accessType":"inputOnly",
                  "@type":"SFBool"
                }
              ],
              "#sourceText":[
"ecmascript:",
"       function fromScript3() {",
"      }"
]
            }
          },
          { "Script":
            {
              "@DEF":"Script6",
              "field": [
                {
                  "@name":"fromScript3",
                  "@accessType":"inputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"toScript7",
                  "@accessType":"outputOnly",
                  "@type":"SFBool"
                },
                {
                  "@name":"string",
                  "@accessType":"outputOnly",
                  "@type":"SFString"
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function fromScript3() {",
"        toScript7 = true;",
"      }",
"      function eventsProcessed() {",
"        string = 'Script6.eventsProcessed';",
"      }"
]
            }
          },
          { "Script":
            {
              "@DEF":"Script7",
              "field": [
                {
                  "@name":"fromScript6",
                  "@accessType":"inputOnly",
                  "@type":"SFBool"
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function fromScript6 () {",
"      }"
]
            }
          },
          { "#comment":"Display the results"
          },
          { "Script":
            {
              "@DEF":"Collector",
              "field": [
                {
                  "@name":"string",
                  "@accessType":"outputOnly",
                  "@type":"MFString"
                },
                {
                  "@name":"fromString",
                  "@accessType":"inputOnly",
                  "@type":"SFString"
                }
              ],
              "#sourceText":[
"ecmascript:",
"      function initialize() {",
"        string[0] = 'Event Sequence:';",
"      }",
"      function fromString(s) {",
"        i = string.length;",
"        string[i] = ' ( ' + i + ' ) ' + s + ' occurred';",
"      }"
]
            }
          },
          { "Transform":
            {
              "@translation":[0,2,0],
              "-children":[
                { "Shape":
                  {
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[0,0.6,0]
                              }
                            }
                        }
                      },
                    "-geometry":
                      { "Sphere":
                        {
                        }
                      }
                  }
                }
              ]
            }
          },
          { "Shape":
            {
              "-geometry":
                { "Text":
                  {
                    "@DEF":"Result"
                  }
                },
              "-appearance":
                { "Appearance":
                  {
                    "-material":
                      { "Material":
                        {
                          "@diffuseColor":[0.101961,0.839216,1]
                        }
                      }
                  }
                }
            }
          },
          { "Viewpoint":
            {
              "@description":"Execution model example",
              "@position":[7,-1,18]
            }
          },
          { "ROUTE":
            {
              "@fromField":"touchTime",
              "@fromNode":"TS",
              "@toField":"touchTime",
              "@toNode":"Script1"
            }
          },
          { "ROUTE":
            {
              "@fromField":"toScript2",
              "@fromNode":"Script1",
              "@toField":"fromScript1",
              "@toNode":"Script2"
            }
          },
          { "ROUTE":
            {
              "@fromField":"toScript3",
              "@fromNode":"Script1",
              "@toField":"fromScript1",
              "@toNode":"Script3"
            }
          },
          { "ROUTE":
            {
              "@fromField":"toScript4",
              "@fromNode":"Script2",
              "@toField":"fromScript2",
              "@toNode":"Script4"
            }
          },
          { "ROUTE":
            {
              "@fromField":"toScript5",
              "@fromNode":"Script3",
              "@toField":"fromScript3",
              "@toNode":"Script5"
            }
          },
          { "ROUTE":
            {
              "@fromField":"toScript6",
              "@fromNode":"Script3",
              "@toField":"fromScript3",
              "@toNode":"Script6"
            }
          },
          { "ROUTE":
            {
              "@fromField":"toScript7",
              "@fromNode":"Script6",
              "@toField":"fromScript6",
              "@toNode":"Script7"
            }
          },
          { "ROUTE":
            {
              "@fromField":"string",
              "@fromNode":"Script1",
              "@toField":"fromString",
              "@toNode":"Collector"
            }
          },
          { "ROUTE":
            {
              "@fromField":"string",
              "@fromNode":"Script2",
              "@toField":"fromString",
              "@toNode":"Collector"
            }
          },
          { "ROUTE":
            {
              "@fromField":"string",
              "@fromNode":"Script3",
              "@toField":"fromString",
              "@toNode":"Collector"
            }
          },
          { "ROUTE":
            {
              "@fromField":"string",
              "@fromNode":"Script6",
              "@toField":"fromString",
              "@toNode":"Collector"
            }
          },
          { "ROUTE":
            {
              "@fromField":"string",
              "@fromNode":"Collector",
              "@toField":"string",
              "@toNode":"Result"
            }
          }
        ]
    }
  }
}

Click here to view this example in a 3D scene window.

Clicking on the green sphere should display a text string for each eventsProcessed event. The two possible correct displays for this example are:

Event Sequence:
  1) Script1.eventsProcessed occurred
  2) Script2.eventsProcessed occurred
  3) Script3.eventsProcessed occurred
  4) Script6.eventsProcessed occurred

or

Event Sequence:
  1) Script2.eventsProcessed occurred
  2) Script1.eventsProcessed occurred
  3) Script3.eventsProcessed occurred
  4) Script6.eventsProcessed occurred
--- X3D separator bar ---