Subsections

• 4.3.1 VRML Code Generation with Javascript

   
4.3 VRML code generation

There are (in theory) three situations:

1.

Generate a VRML file (or frame content) from outside VRML.

2.

Generate VRML from inside VRML.

3.

Generate code from outside into an existing scene. See chapter 6 on page which will introduce you to the External Authoring Interface (EAI).

In this section we will only cover the first item somewhat. Make sure not to confuse Vrml Code generation with Javascript with scripting interfactive VRML. This section is absolutly optional reading, you don't need anything of this to move on with the following chapters.

   
4.3.1 VRML Code Generation with Javascript

Generating a VRML scene with Javascript is rather easy once you know how to deal with Netscape Frames using Javascript. [You also need a browser that works, some older browsers will not allow to it].

Generating VRML can be useful in various applications, e.g. you can write a VRML generator for your students or show mathematical functions (or other data) in 3D. The next example has been very strongly inspired from Yasuyuki Suzuki's Object Creation example.

Example 4.3.1   VRML code generation with Javascript  

Contents:	Contains 2 frames. A html/javascript frame allows to create simple objects
HTML:	generate-js-1-frame.html
Frame Source:	generate-js-1-frame.text
HTML/JS Source:	generate-js-1.text

Look at the full example before you move on please ! Below we will discuss a slightly simplified version. Anyhow, in order to understand this example you rather must learn more about Javascript than anything about VRML. (See Netscape's OnLine documentation for developpers. At Tecfa we have a copy of the JavaScript Guide).

Let's have a quick look at the frameset in the file generate-js-1-frame.html (if you don't understand this, please read section 4.2 on page ).

<FRAMESET COLS="*, 70%">
<FRAME SRC="generate-js-1.html" NAME="menu_frame"
       BORDER="0">
<FRAME SRC="javascript:top.vrml();" NAME="vrml_frame" 
       NORESIZE SCROLLING="no">
</FRAMESET>

Note that we also generate dynamically an inital object in the frame by directly calling javascript:top.vrml(). We could have left this page blank or inserted some canned VRML *.wrl page. Just remember that the frame to the left is called menu_frame and the frame to the right vrml_frame.

The user enters size and color information in the left (HTML/Javascript) frame and then can click on ``Create Box''. This will render the object in the VRML frame to the right.

This is a simple HTML Form that will collect information from the user. Note the following things:

1.

The ``form'' tag has just a name field (no method field needed)

2.

The input ``button'' will trigger an onClick event when pressed that will launch the ``makeBox'' script. This script will then poll the form for values the user entered (see below).

<FORM NAME="cont">
<STRONG>Example Objects:</STRONG><p>
<STRONG>Custom Box:</STRONG><p>
 Width : <INPUT TYPE="text" NAME="w" VALUE="1" SIZE="5"><br>
 Height : <INPUT TYPE="text" NAME="h" VALUE="1" SIZE="5"><br>
 Depth : <INPUT TYPE="text" NAME="d" VALUE="1" SIZE="5"><p>
 Colors (be sure to enter values between 0 and 1!<br>
 Red  : <INPUT TYPE="text" NAME="red" VALUE="1" SIZE="5"><br>
 Green : <INPUT TYPE="text" NAME="green" VALUE="0.2" SIZE="5"><br>
 Blue  : <INPUT TYPE="text" NAME="blue" VALUE="0" SIZE="5"><p>

<INPUT TYPE="button" NAME="make" VALUE="Create Box" onClick="makeBOX();"><P>
<HR>
</FORM>

Here are the most important elements of the (simplified) source code. The function makeBOX will draw a box of a given size in given colors. It will access the values entered in the form below and write lines to the VRML frame.

In this example (like in the original) we poll the values the user entered from the form, e.g.:

     w = top.menu_frame.document.cont.w.value;

will assign the value for the width of the box to a temporary variable ``w''. There are several ways of doing this as you can note. Also note that polling the form is one way of doing it. Alternatively we could have passed the values to this function within the INPUT tag of the form. Finally be aware that we do not any value checking. It's up to the user to enter good values.

var MIMEType = 'x-world/x-vrml';

function makeBOX() {
     var w, h, d, red, green, blue;
// Note: all these ways of accessing values work
     w = top.menu_frame.document.cont.w.value;
     h = top.menu_frame.document.forms[0].h.value;
     d = document.forms[0].d.value;
     r = document.forms[0].red.value;
     g = document.forms[0].green.value;
     b = document.forms[0].blue.value;

     with (top.vrml_frame.document) {
        open(MIMEType);
        writeln('#VRML V2.0 utf8');
        writeln('Shape \{');
        writeln('  appearance Appearance \{');
        writeln('        material Material \{ ');
        writeln('           emissiveColor ' + r + ' ' + g + ' ' + b);
        writeln('                      \} \}');
        writeln('  geometry Box \{');
        writeln('     size ' + w + ' ' + h + ' ' + d)
        writeln('\} \}');
        close();
     }
}

The only other thing you need to know is how to write to the VRML frame:

1.

We first get some handling on the VRML frame's document window object. The with statement makes referring to objects properties and methods simpler (you don't have to type the full path each time). In the following expression top refers to the ``top'' node in the Javascript hierarchy (?), vrml_frame is the name we gave to the frame where the plugin will appear and document refers to it's contents.

      with (top.vrml_frame.document) {

2.

Next we ``open'' output to the vrml frame with 'x-world/x-vrml'.

      var MIMEType = 'x-world/x-vrml';
      .....
      open(MIMEType);

We defined the variable MIMEType here since we do it more than once.

3.

Next you simply write out the VRML code (including a valid VRML header first).

4.

Then you close the output to the frame.

Note how we can simply ``string-add'' ``canned'' VRML instructions with variables in the code. Javascript is very convenient in this respect.