VRML with JavaScript Tutorial

戻る はじめに / ノードの生成

ノードのコピー

雛型となるノードを好きなだけ複写してみましょう。  イベントの内容に沿ったノード生成や、アニメーションそのものを生成する方法について。

一定間隔に整列

copy ball 1D
VRML - ソース / X3D - ソース
赤い球が横に5つ並んで表示されます。
DEF Sc Script {
eventOut MFNode children

field SFNode Ball Shape {
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
geometry Sphere {}
}

url "javascript:

function initialize() {

var i = 0;
var balls = new MFNode ();

for ( var x=-2; x<=2; x++ ) {

var Tf = new SFNode ('Transform {}');
Tf.translation[0] = x * 2;
Tf.children[0] = Ball;

balls[i++] = Tf;

}

children = balls;

}

"
}
for 文により、ボールを表示させる x 座標を少しずつ変化させ、その度に Transform ノードを新規生成しています。  生成されたそれぞれの Transform ノードの children フィールドにボールの形状( Shape ノード )を入れています。


Tf.translation[0] = x * 2;
の記述は
Tf.translation.x = x * 2;
でも構わない気がしますが、後者の場合 Cosmo ではエラーこそ出ませんが正しく動作しない不具合があります。  Cortona Contact ではどちらの記述でも同様に正しく動作します。


この作例では仮の変数 balls を作成し、for 文のループでその変数に生成されたノードを代入してから、最後に children に全てを一括して代入しています。  ループ中で直接 children に代入しても構わないのですが、 これは Contact の for 文や while 文 のループ中で eventOut で定義された変数への代入が実行されると処理速度が低下する不具合の対策です。  (この程度のループでは殆ど問題ないですが・・・。) 

copy ball 2D
VRML - ソース / X3D - ソース
赤い球が XY 平面上に5×3個並んで表示されます。
copy ball 3D
VRML - ソース / X3D - ソース
赤い球が立体的に3×3×3個並んで表示されます。
copy ball ring
VRML - ソース / X3D - ソース
赤い球が円周上に並んで表示されます。

イベント入力値を反映

drawing #0
VRML - ソース / X3D - ソース
茶色い板の上でカーソルを動かすと、小さな赤い球がマウスカーソルの軌跡を残すように追加されます。
DEF Sc Script {
eventIn SFVec3f set_hitPoint
eventOut MFNode addChildren

field SFNode Ball Shape {
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
geometry Sphere {
radius 0.1
}
}

url "javascript:

function set_hitPoint(vec) {

var Tf = new SFNode ('Transform {}');
Tf.translation = vec;
Tf.children[0] = Ball;

addChildren[0] = Tf;

}

"
}
TouchSensor ノードの hitPoint_changed フィールドからは、 このセンサーが仕込まれた形状の上をマウスカーソルが移動する度に、その形状の表面上の触れた位置を示す3次元ベクトル ( SFVec3f ) がイベント出力されます。  よって、スクリプトの set_hitPoint 関数は板の上でマウスカーソルが移動する度に実行されます。

set_hitPoint 関数の引数 vec は板上のマウスカーソルで触れた場所であり、そこに赤い球が追加されます。  Group ノードの addChildren にイベント入力が行われると、 そのノードの children フィールドの一番最後に addChildren の内容が追加されます。

無からのアニメーション生成

先の作例では赤い球は板の上に留まったままで、何れ板の上を埋め尽くしてしまいます。  赤い球が置かれた後、それを自動的に移動するアニメーションを追加しましょう。 drawing #1
VRML - ソース / X3D - ソース
茶色い板の上でカーソルを動かすと、小さな赤い球がマウスカーソルの軌跡を残すように追加されます。  追加された球は、少し時間が経つと板の上から離れて徐々に上昇します。
DEF Sc Script {
eventIn SFVec3f set_hitPoint
eventOut MFNode addChildren

field SFNode Ball Shape {
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
geometry Sphere {
radius 0.1
}
}

field MFFloat key_0 [ 0.0 0.25 0.5 0.75 1.0 ]
field MFVec3f keyValue_0 [ 0 0 0, 0 1 0, 0 4 0, 0 9 0, 0 16 0 ]

url "javascript:
function set_hitPoint(vec,et) {

// TimeSensor ノードを生成し、イベント時刻を startTime にセットする。
var TiS = new SFNode ('TimeSensor { cycleInterval 20 }');
TiS.startTime = et + 1;

// PositionInterpolator ノードを生成し、key と keyValue をセットする。
var PI = new SFNode ('PositionInterpolator {}');
PI.key = key_0;
PI.keyValue = keyValue_0;

// Transform ノードを生成し、その子ノードをセットする。
var ballTf = new SFNode ('Transform {}');
ballTf.children = new MFNode ( Ball, TiS, PI );

// ルートを追加する。
Browser.addRoute( TiS, 'fraction_changed', PI, 'set_fraction' );
Browser.addRoute( PI, 'value_changed', ballTf, 'translation' );

// Transform ノードを生成し、カーソルが触れた場所に球をセットする。
var Tf = new SFNode ('Transform {}');
Tf.translation = vec;
Tf.children[0] = ballTf;

addChildren[0] = Tf;

}
"
}
赤い球は「徐々に上昇する」という動きこそ共通していますが、個々に独立したアニメーションを行う必要があります。  マウスカーソルが板の上を移動する度にスクリプトの関数が実行されるのは前の作例と一緒ですが、球の形状コピーだけでなく TimeSensor ノードと PositionInterpolator ノード、そしてこれらを関連付けるための ROUTE など アニメーションに必要な要素全てを関数実行ごとに生成しています。

このページのトップ | 前へ 文字列から生成 | 次へ 文字列以外から生成