－ チュートリアル －
ダウンロードして解凍した「PsychoVision3D\audio.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/Saku.js"></script>
<script type="text/javascript">
var _model;
var _audio;
var _delta;
function beginWebGL()
{
_audio = document.getElementById("audioSample");
_audio.load();
_model = new Saku();
_delta = new Vector3D(0,0,0);
}
function drawWebGL()
{
_model._pos.x += _delta.x * _elapsed;
_model._pos.z += _delta.z * _elapsed;
_eye.y = 160;
_lookAt.y = 160;
_mvMatrix.lookAtCamera(
_eye,
_lookAt,
new Vector3D(0,1,0));
_model.draw();
}
function onMouseDown(event)
{
_audio.play();
}
function onMouseUp(event)
{
}
function onMouseMove(event)
{
}
function onKeyDown(event)
{
switch ( getKeyCode(event) )
{
case 65: _delta.x = -100; break;
case 68: _delta.x = 100; break;
case 87: _delta.z = -100; break;
case 83: _delta.z = 100; break;
}
}
function onKeyUp(event)
{
_delta = new Vector3D(0,0,0);
}
</script>
</head>
<body onload="initWebGL();">
<canvas id="PsychoVision3D-Canvas" width="728" height="550"></canvas>
<audio id="audioSample" preload="auto">
<source src="sounds/Catch.ogg" />
<source src="sounds/Catch.mp3" />
</audio>
</body>
</html>
「var _delta = vec3.create(0,0,0);」でキャラクターを前後左右に動かす増分の三次元ベクトルを宣言します。
「beginWebGL」関数で初期化のコードを記述します。「_audio = document.getElementById("audioSample");」で「<audio id="audioSample" preload="auto">」のaudio要素を指定して、「_audio.load();」でサウンドを読み込みます。。
「drawWebGL」関数が毎フレーム呼ばれるので「_model」を移動や描画したりします。
マウスをクリックしたら「_audio.play();」でサウンドを再生します。
「function onKeyDown(event)」でキーボードが押されたら呼ばれ、「getKeyCode(event)」で[65][68][87][83]で[A][D][W][S]キーが押されたか判定します。
Firefox等のブラウザで「PsychoVision3D\audio.html」を開いて、キャラクターがアニメーションするか確認してください。
