Basic VRML/JavaScript Tutorial

Basic VRML/JavaScript Tutorial

Function for Generate Circles, translation for placements and Gradient Colors by using loop by VRML/JavaScript

DEF circles Transform { children[ ] }
Script {
field SFNode circles USE circles
url "javascript:
function initialize()
{
// Initilize Tower
tower = ' ';
var tx = 0;
var ty = 0;
var tz = 0;

var r = 1;
var c = 0;

for (i = 0; i < 20; ++i, tz = i) {
if (i < 10) {
c += 0.1;
r -= 0.05;
// tx += 0.05;
// ty += 0.05;
} else {
c -= 0.1;
r += 0.05;
// tx -= 0.05;
// ty -= 0.05;
}
tower = tower +
' Transform { translation ' + tx + ' ' + ty + ' ' + tz +
' children [ Shape { appearance Appearance { material Material { diffuseColor 0 0.5 ' + c + ' } } geometry Circle { radius ' + r + ' } } ] }';
}
children = Browser.createVrmlFromString(tower);
circles.addChildren = children;
}
"
}

Generate Circles, Placements and Gradient Colors - VRML/JavaScript
Generate Circles, Placements and Gradient Colors - VRML/JavaScript

and this is full source code for this example

######################################################################
# Tower.wrl
# Hassadee Pimsuwan, silkzter@gmail.com
# http://iri.sut.ac.th/~pimsuwan, http://hapztron.wordpress.com
# Credit: Brezhnyev Kirill
######################################################################
#VRML V2.0 utf8

EXTERNPROTO Background2D [
eventIn SFBool set_bind
exposedField SFColor backColor
exposedField MFString url
eventOut SFBool isBound
]
[
"urn:inet:bitmanagement.de:node:Background2D",
"http://www.bitmanagement.de/protos/nodes.wrl#Background2D"
]

EXTERNPROTO Transform2D [
eventIn MFNode addChildren
eventIn MFNode removeChildren
exposedField MFNode children
exposedField SFVec2f center
exposedField SFFloat rotationAngle
exposedField SFVec2f scale
exposedField SFFloat scaleOrientation
exposedField SFVec2f translation
]
[
"urn:inet:bitmanagement.de:node:Transform2D",
"http://www.bitmanagement.de/vrml/protos/nodes.wrl#Transform2D"
]

Background2D { backColor 1.0 1.0 1.0 }
NavigationInfo { type [ "EXAMINE", "ANY" ] }
Viewpoint { position 0 0 25 }

DEF circles Transform { children[ ] }
Script {
field SFNode circles USE circles
url "javascript:
function initialize()
{
// Initilize Tower
tower = ' ';
var tx = 0;
var ty = 0;
var tz = 0;

var r = 1;
var c = 0;

for (i = 0; i < 20; ++i, tz = i) {
if (i < 10) {
c += 0.1;
r -= 0.05;
// tx += 0.05;
// ty += 0.05;
} else {
c -= 0.1;
r += 0.05;
// tx -= 0.05;
// ty -= 0.05;
}
tower = tower +
' Transform { translation ' + tx + ' ' + ty + ' ' + tz +
' children [ Shape { appearance Appearance { material Material { diffuseColor 0 0.5 ' + c + ' } } geometry Circle { radius ' + r + ' } } ] }';
}
children = Browser.createVrmlFromString(tower);
circles.addChildren = children;
}
"
}

Special Thanks for this idea to -> Brezhnyev Kirill, Bitmanagement Software GmbH
Hassadee Pimsuwan – Student Internship, Bitmanagement Software GmbH

About these ads

2 thoughts on “Basic VRML/JavaScript Tutorial

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s