VRML with JavaScript Tutorial

戻る はじめに / アニメーション

アニメデータの生成

刻々と変化する位置や回転値などのアニメーションデータをスクリプトを使って生成する方法について。

keyとkeyValueの生成

PositionInterpolator ノードや OrientationInterpolator ノードなどキーフレームアニメーションのフィールド値である keykeyValue をスクリプトで生成してみましょう。
VRML - ソース / X3D - ソース
これは赤い円錐が画面の真ん中を中心に周回移動し続けるアニメーションです。
DEF Sc Script {
eventOut MFFloat key
eventOut MFRotation keyValue
field SFInt32 kl 4
url "javascript:
function initialize () {

k = new MFFloat();
kv = new MFRotation ();
var pi2 = 2 * Math.PI;

for ( var i = 0; i <= kl; i++ ) {

k[i] = i / kl;
kv[i] = new SFRotation ( 0, 0, 1, pi2 * i / kl );

}

key = k;
keyValue = kv;

}
"
}
このスクリプトは OrientationInterpolatorkeykeyValue を生成するスクリプトです。  具体的には以下のような値が生成されます。  ( VRMLブラウザーにより若干の計算誤差が生じる場合もあります。)

key [0, 0.25, 0.5, 0.75, 1]
keyValue [0 0 1 0, 0 0 1 1.5708, 0 0 1 3.14159, 0 0 1 4.71239, 0 0 1 6.28319]


このスクリプト場合 keykeyValue の要素数はどちらも kl + 1 個になります。  この作例の場合これ以上要素数を増やしても意味はありませんが、曲線上を滑らかに移動させるようなアニメーションの場合は要素を多めにした方がいいでしょう。


VRML - ソース / X3D - ソース
これは PositionInterpolator によって、赤い球と青い球がサインカーブを描きながら、左から右へと移動するアニメーションです。  keykeyValue の求め方は同じですが、赤い球の要素数は 6 個、青い球の要素数は 21 個となっています。  当然要素数の多い青い球の方がよりサインカーブに近い動きをします。


VRML - ソース / X3D - ソース
これは CoordinateInterpolator によるモーフィングアニメでの海面の波の動き(あまりリアルではありませんが)を表したアニメーションです。  普通に keykeyValue を記述するとソース全体がとても大きくなりますが、 スクリプトで求めることによりソースをコンパクトに纏めることができました。

時間経過に応じた生成

PositionInterpolator ノードや OrientationInterpolator ノードなどを使わずに、 TimeSensor ノードの fraction_changed から、それに応じた位置や回転値を直接スクリプトで求めてみましょう。
VRML - ソース / X3D - ソース
これも赤い円錐が画面の真ん中を中心に周回するアニメーションですが、スクリプトでリアルタイムに回転値を求めています。
DEF Sc Script {
eventIn SFFloat set_fraction
eventOut SFRotation rotation
field SFFloat pi2 6.28
url "javascript:

function initialize () {

pi2 = 2 * Math.PI;
rotation = new SFRotation ( 0, 0, 1, 0 );

}

function set_fraction (f) {

rotation.angle = pi2 * f;

}

"
}
ロード完了直後に自動実行される initialize 関数rotation を z 軸中心とした回転になるように設定しています。  set_fraction 関数は TimeSensorfraction_changed を刻々とイベントアウトする度に実行され、 その引数 f は fraction_changed の値が入ります。  この関数により fraction_changed の 0 から 1 への変化が rotationの角度 ( angle ) の 0 から 2π への変化となります。


VRML - ソース / X3D - ソース
これは黄色いミサイルを画面一番奥にいる UFO に当てるゲームです。  画面右下のオレンジ色の発射ボタンを押すと、ミサイルがゆっくりと画面奥に進んで行きます。  画面下のスライダーでミサイルを左右に操作して、赤い隕石を避けながらミサイルを UFO に当ててください。  UFO にミサイルを当てることができると 10 点が加算されます。  ミサイルが赤い隕石に当たってしまう、もしくは何にも当たらずに画面奥まで進んでしまうと再装填されますので、もう一度発射ボタンを押してください。  ゲームオーバーはありませんので、適当なところで止めてください。

このページのトップ | 前へ タイムセンサー | 次へ 任意の方向への移動