Xj3D Browser Applet Example

Modifying A DEF'd Proto's Field

HTML Modifications

Only very minor modifications to the ECMA Script from the last tutorial are needed. Also, for the sake of readability the parameter for the applet has changed names to reflect that it is loading a proto instead of a model.

The HTML

Applet tag changes:
Old tag: <param name="modelURL" value="http://www.foo.org/examples/example.x3dv"/>
New tag: <param name="protoURL" value="http://www.foo.org/examples/example.x3dv"/>

New Input Construct: This example uses a simple button to call the JavaScript, and uses the following tag:


<button id="colorbutton" onclick="changeColor()">Change Color</button>

The JavaScript

New function to call the new method, which takes a single parameter representing the defName in the scene of the ProtoInstance:


function changeColor() {
    document.applets[0].getSubApplet().changeColor("Proto DEF Name");
}

Java Code Modifications

Changing the color of the Proto is nearly identical to changing which Viewpoint is bound (as shown in the last tutorial). The only difference is, instead of a SFBool the field being changed contains a SFColor type, which takes a float[] of length 3 as a value parameter. This example sets the new color to randomly generated values.


public void changeColor(String defName) {
    X3DScene scene = (X3DScene)browser.getExecutionContext();
    X3DNode protoInstance = scene.getNamedNode(defName);
    SFColor color = (SFColor)protoInstance.getField("color");
    float[] colorValue = {new Float(Math.random()), new Float(Math.random()), new Float(Math.random())};
    color.setValue(colorValue);
}

X3D Modifications

The meat of this example is in the PROTO which is defined and created inside the X3D file that is loaded by the applet. The next sections will describe how to create a PROTO and how to add it with a DEF name into the scene. When created at runtime, a ProtoInstance is not assigned a DEF name, and therefore in order for this example to work, the DEF name must be assigned within the X3D file, and then referenced within the hardcoded HTML, as before.

>X3D Header and Footer

X3D follows strict XML formatting, in that all tags must have a corresponding close tag. Also, the PROTO node type is not guaranteed to be supported in any profiles below "Immersive". For a full specification of the X3D type, visit the official Web3D X3D Spec

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN" "http://www.seb3d.org/specifications/x3d-3.0.dtd">
<X3D profile='Immersive' version='3.0'>
<head>
</head>

The next tag is the <Scene> tag, and it will contain the Proto information. After the ProtoInstance is defined the document will require </Scene> and </X3D> closing tags to be in compliance with the X3D XML format.

ProtoDeclare Node

A Proto node has ProtoInterface and ProtoBody nodes within it, that will allow the definition of custom fields and behavior, which will create the functionality desired. Each field requires an accessType, a type and a name field and there is an optional value field for some field types, however this is not required for this example. The ProtoInterface node defines the fields that the Proto contains. The ProtoBody node defines the structure of the Proto and possibly how custom fields will interact with standard nodes or fields. In this case, the custom field color will connect to the standard Material node field diffuseColor. The geometry of this Proto is just a standard box, using all the defaults.


<ProtoDeclare name='Example'>
  <ProtoInterface>
    <field accessType='inputOnly' type='SFColor' name='color'></field>
  </ProtoInterface>
  <ProtoBody>
    <Shape>
      <Appearance>
        <Material>
          <IS>
            <connect nodeField='diffuseColor' protoField='color'></connect>
          </IS>
        </Material>
      </Appearance>
      <Box></Box>
    </Shape>
  </ProtoBody>
</ProtoDeclare>

ProtoInstance Node

The ProtoInstance node is where the DEF name of a particular instance of a previously declared Proto is assigned, along with assigning any values to fields that the particular Proto may contain. In this case, just the DEF name is set.


  <ProtoInstance name='Example' DEF='ExampleInstance'></ProtoInstance>

Don't forget to close the Scene and X3D tags, or any other tags that may be still open, or the document will not conform to the correct format, and the parser will likely throw an exception.

Source Files


[ Xj3D Homepage | Xj3D @ Web3d | Screenshots | Dev docs | Dev Releases | Contributors | Getting Started ]
Last updated: $Date: 2008-08-29 00:03:26 $