Dynamically Creating VRML, createVrmlFromString

More of this Feature • Part 2: Details Details    Join The Discussion "market trends..." AHEDSTROM    Related Resources • Tutorials • Learning VRML    From Other Guides • JavaScript • HTML/XML • Perl

Dateline: 12/06/00

This is a little tutorial about a really cool capability when you combine JavaScript with VRML and the createVrmlFromString function. createVrmlFromString is a JavaScript function that takes a string as an argument and create Nodes in the VRML scene graph. It sounds complicated but really isn't. Take a look at the figure up there at the start of this article. It contains around 75 cubes each with a range of random sizes. This would be a completly ridiculous thing to author by hand, or at least extremely painful.

First let's lay out the overall structure of the VRML file. Let me also acknowledge that I figured out this stuff by looking at the code from Evgeny Demidov's site. There is some code in there that is simply brilliant and some of the most elegent use of generating VRML I've ever seen.

#VRML V2.0 utf8
# Sandy Ressler	createFromVrml example

DEF ROOT Transform{ children[ ]}
Viewpoint {
	description	"Home"
	position 25 25 75
}
Background { 
   skyColor        [ 
   		0.0 0.2 0.7,
		0.0 0.5 1.0,
		1.0 1.0 1.0 
		] 
		skyAngle [1.309, 1.571 ]
		groundColor [
			0.1 0.1 0.0,
			0.4 0.25 0.2,
			0.6 0.6 0.6
			]
		groundAngle [ 1.309, 1.571 ]
   }

DEF	LOOPER Script {
	eventIn SFBool isActive
	field SFNode ROOT USE ROOT
	url "javascript:

	function getRandom() {
		return Math.random();
	}
	function initialize ()
	{
		str_f = ' ';
		var x = 0;
		var y = 0;
		for (z = 0; z < 50; z+=20) {
			for (y = 0; y < 50; y+=10) {
				for ( x = 0; x < 50; x+=10 ) {
					str_f = str_f+ 
'DEF ROOT Transform { translation '+x+
' '+y+' '+z+ ' children Transform {	'+
'children	[ Shape { appearance Appearance { '+
'material DEF WHITE Material {  diffuseColor ' +getRandom()+ ' ' +getRandom()+ ' ' +getRandom()+ ' }} '+
'geometry Box { size ' +7*getRandom()+ ' ' +7*getRandom()+ ' ' +7*getRandom()+ ' } } ] } }';
		}
	}
}
		new_f = Browser.createVrmlFromString( str_f );
		ROOT.addChildren = new_f;
	
}
"

}