VRML with JavaScript Tutorial

はじめに

VRML（Virtual Reality Modeling Language：仮想現実設計言語）はWebブラウザー上で、自在に動かせる3DCGを表現するための言語です。　メモ帳などのテキストエディターで作成、編集することができ、VRMLプラグインがインストールされたWebブラウザーなどで動作確認できます。

VRML2.0 (VRML97) は立体形状の表示のみならず、アニメーションさせることができますが、スクリプトを用いると、より深みのある表現が可能になります。　ここでは VRML2.0 の Script ノードで使うことが出来る JavaScript の解説、ノウハウ、ちょっとしたテクニックや作例などを纏めています。

この解説は VRML2.0 の基本、ノードとフィールド、DEF, USE, ROUTE, PROTO, EXTERNPROTO をそこそこ理解している方を対象としています。　（全て理解や暗記をしている必要はありません。　私もしていませんので。）　 VRMLの作成と勉強に役立つリンク集

VRML2.0 の仕様に従って解説していますが、X3D ( XML フォーマットの VRML2.0 の後継規格 ) の場合にも、ある程度お役立ちいただけます。

VRMLブラウザー

VRMLブラウザーは各種在りますが、ここでは Cosmo Cortona Contact の３ブラウザーを中心に扱っています。　特に断りがない限り、この３種類についての解説はその右側に示されたVRMLブラウザーに当てはまります。 VRMLブラウザーのダウンロード

Cosmo	Cosmo Player 2.1 Pivoron Player 1.0	VRML2.0 の仕様に忠実で融通がきかないが処理スピードは速い。　エラー表示の内容が詳しく丁寧なのでデバッグしやすいが、ある種の記述ミスではエラーを出す前にハングアップする場合がある。
Cortona	Cortona VRML Client 3.1 / 4.2	VRML2.0 の仕様外の拡張が行われているが処理スピードが遅い。　エラーが出ると自動的にコンソールが開いて表示してくれるが、他のブラウザーでエラーになる条件でもエラーを表示しない場合がある。
Contact	blaxxun Contact 3D 5.1 BS Contact VRML/X3D 6.2 GLView 4.4	VRML2.0 の仕様外の拡張が行われていて処理スピードは激速（ GLView4.4 は遅い）だが、スクリプトの基本的な機能が多く削られている。　他のブラウザーではエラーになる条件でも、エラーを表示しない場合が多い。

この３ブラウザーのスクリプトの仕様は少しづつ異なります。　（Internet Explorer, Netscape, Opera の JavaScript の仕様が少しづつ異なるのと趣が似ています。）
ここで解説するスクリプトのソースは、この３ブラウザーのどれでも動作をすることを旨としています。　各ブラウザーごとの特徴を補い会う為の解説は行いますが、あるブラウザーでのみ動作する特殊機能の解説は殆ど行いませんのでご了承ください。

X3D の作例の動作確認は BS Contact VRML/X3D でのみ行っています。　このブラウザーは文書型宣言 ( <!DOCTYPE X3D PUBLIC ～ > ) を正しく処理できないため、ここで扱っている X3D の作例ではそれを記述していません。

Webブラウザーの JavaScript との違い

VRML2.0 の Script ノードで扱える JavaScript は Internet Exploler や Netscape などの Webブラウザーで動作する JavaScript と書式は概ね同じですが、不必要な機能が削られ、独自の機能とオブジェクトが付け足されています。　主立った特徴を列挙してみました。

Navigator オブジェクト、 Window オブジェクトはありません。
Window オブジェクトの下位にあたるオブジェクト（document、Image、Formなど）もありません。その他にも使えないオブジェクトやメソッドがあります。

alert ( ) などのダイアログもありません。
代わりに print ( ) があります。　括弧内に変数や文字列を入れて、VRMLブラウザのコンソールに表示させることが出来ます。

VRML独自のオブジェクトが追加されています。
３次元ベクトルを扱う SFVec3f オブジェクト、任意軸の回転を扱う SFRotation オブジェクト、ピクセル画像を扱う SFImage オブジェクト、４Ｘ４行列を扱う VrmlMatrix オブジェクト、VRMLブラウザーと情報交換する為の Browser オブジェクトなど、 3Dプログラミングに便利なオブジェクトが備わっています。

初期化に行う処理は initialize ( ) 関数に記述してください。
この関数はファイルを読み込んだ直後に自動実行されます。

文字列はシングルクォーテーション ( ' ) で囲んでください。
ダブルクォーテーション ( " ) は使えません。　たとえコメント（注釈）内であっても使うことはできません。

ここでは JavaScript の基本は殆ど解説しません。　 JavaScript の基本について勉強したい方は他のサイトを参照してください。　 Google の "JavaScript 入門" の検索結果

このチュートリアルを閲覧するための推奨Webブラウザー

Internet Explorer 6 以上
Netscape 7 以上
Mozilla 1.7 以上
Mozilla Firefox 1.0 以上
Opera 7 以上

もしくはそれらの互換ブラウザーでの閲覧を推奨します。

次へ書式について