－ チュートリアル －
ダウンロードして解凍した「Vixar Motion」を起動し、「ファイル＞開く」メニューで「VXM\Hero.vxm」ファイルを開いていください。
「制御＞再生」メニューを実行して、アニメーションしているか確認してください。
「ファイル＞名前を付けて保存」メニューを実行し、ファイルダイアログで「ファイルの種類」を「WebGLファイル(*.js)」にして、ダウンロードして解凍した「PsychoVision3D\models」フォルダ内に「Hero.js」と名前を付けて保存します。
「PsychoVision3D\index.html」ファイルを開きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PsychoVision3D</title> <script type="text/javascript" src="lib/Vector3D.js"></script> <script type="text/javascript" src="lib/Matrix3D.js"></script> <script type="text/javascript" src="lib/PsychoVision3D.js"></script> <script type="text/javascript" src="lib/Sprite2D.js"></script> <script type="text/javascript" src="lib/Model3D.js"></script> <script type="text/javascript" src="lib/BoneModel3D.js"></script> <script type="text/javascript" src="lib/Material.js"></script> <script type="text/javascript" src="models/Hero.js"></script> <script type="text/javascript"> var _model; function beginWebGL() { _model = new Hero(); } function drawWebGL() { _model._pos.y = 40; _eye = new Vector3D(0,160,500); _lookAt.y = 170; _mvMatrix.lookAtCamera( _eye, _lookAt, new Vector3D(0,1,0)); _model.draw(); } function onMouseDown(event) { _model.playAnimation(1,false,false); } function onMouseUp(event) { _model.playAnimation(0,true,false); } function onMouseMove(event) { } function onKeyDown(event) { } function onKeyUp(event) { } </script> </head> <body onload="initWebGL();"> <canvas id="PsychoVision3D-Canvas" width="500" height="500"></canvas> </body> </html>
「PsychoVision3D\index.html」ファイルで「<script type="text/javascript" src="models/BlueJersey.js"></script> 」の「BlueJersey.js」を「Hero.js」に書き換えます。
「beginWebGL」関数で初期化のコードを記述します。
「var _model;」変数が3Dオブジェクトで、「_model = new BlueJersey();」を「_model = new Hero();」に書き換えます。
「drawWebGL」関数が毎フレーム呼ばれるので「_model」を移動や描画したりします。
「_model.playAnimation(1,false,false);」でモデルをアニメーション番号1を、ループなし、最後で止まらずに再生します。
Firefox等のブラウザで「PsychoVision3D\index.html」を開いて、キャラクターがアニメーションするか確認してください。
