－ チュートリアル －
ダウンロードして解凍した「PsychoVision3D\bg.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/Ground.js"></script>
<script type="text/javascript">
var _model;
var _bg;
var _mouse = false;
function beginWebGL()
{
_model = new Character();
_bg = new Ground();
}
function drawWebGL()
{
var pos = _model.getPos();
if ( _mouse )
{
pos = _model.forward(400);
}
else
{
_model.addRotateY(100);
}
if ( _bg.intersect(pos,new Vector3D(0,-1,0)) )
{
_model._pos.x = pos.x;
_model._pos.y = pos.y - _bg._distance + 50;
_model._pos.z = pos.z;
}
_eye = _model.posPlus(600,300,600);
_lookAt = _model.posPlus(0,150,0);
_mvMatrix.lookAtCamera(
_eye,
_lookAt,
new Vector3D(0,1,0));
_model.draw();
_bg.draw();
}
function onMouseDown(event)
{
_mouse = true;
_model.playAnimation(1,true,false);
}
function onMouseUp(event)
{
_mouse = false;
_model.playAnimation(0,true,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」を移動や描画したりします。
「pos = _model.forward(400);」で_modelを前進させて、その座標をposに返します。
「_bg.intersect(pos,[0,-1,0])」でposから真下にレイを飛ばして_bgの地面が交差するか判定します。
「_eye = _model.posPlus(600,300,600);」でモデルの位置に(x,y,z)を加算したベクトルをカメラ視点「_eye」に代入します。
Firefox等のブラウザで「PsychoVision3D\bg.html」を開いて、キャラクターがアニメーションするか確認してください。
