－ チュートリアル －
「ダウンロードして解凍したPsychoVision3D\direction.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/Character.js"></script>
<script type="text/javascript" src="models/Guitar.js"></script>
<script type="text/javascript">
var _model;
var _guitar;
var _mouse = false;
function beginWebGL()
{
_model = new Character();
_guitar = new Guitar();
_model._pos = new Vector3D(300,0,100);
_guitar._pos.y = 160;
}
function drawWebGL()
{
//主人公
if ( _mouse )
{
_model._pos = _model.forward(300);
}
else
{
_model.addRotateY(100);
}
//ギター
_guitar._rotate.y = _guitar.dirDegree(_model._pos);
//カメラ
_eye = new Vector3D(600,300,600);
_lookAt = new Vector3D(0,150,0);
_mvMatrix.lookAtCamera(
_eye,
_lookAt,
new Vector3D(0,1,0));
//描画
_model.draw();
_guitar.draw();
}
function onMouseDown(event)
{
_mouse = true;
}
function onMouseUp(event)
{
_mouse = false;
}
function onMouseMove(event)
{
}
function onKeyDown(event)
{
}
function onKeyUp(event)
{
}
</script>
</head>
<body onload="initWebGL();">
<canvas id="PsychoVision3D-Canvas" width="728" height="550"></canvas>
</body>
</html>
「beginWebGL」関数で初期化のコードを記述します。
「drawWebGL」関数が毎フレーム呼ばれるので「_model」を移動や描画したりします。
「_guitar._rotate[1] = _guitar.dirDegree(_model._pos);」で_guitarから見た_modelの向きを計算し、そのY回転座標を返します。
Firefox等のブラウザで「PsychoVision3D\direction.html」を開いて、キャラクターがアニメーションするか確認してください。
