# テンプレートを書こう

この左画面を左クリックすれば以下の赤字のスクリプト全部がクリップボードにコピーされるので、右の画面の赤い矢印の右側に貼り付けてください。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>サイコビジョン・スリーディー</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/Model3D.js"></script>
    <script type="text/javascript" src="../lib/BoneModel3D.js"></script>
    <script type="text/javascript" src="../lib/Sprite2D.js"></script>
    <script type="text/javascript" src="../lib/Material.js"></script>
    <script type="text/javascript">

    function beginWebGL()
    {
    }

    function drawWebGL()
    {
    	_eye = new Vector3D(0,150,500);
    	_lookAt.y = 160;
    	_mvMatrix.lookAtCamera(_eye,_lookAt,new Vector3D(0,1,0));
    }

    function onMouseDown(event)
    {
    }

    function onMouseUp(event)
    {
    }

    function onMouseMove(event)
    {
    }

    function onKeyDown(event)
    {
    }

    function onKeyUp(event)
    {
    }
    </script>
    </head>
    <body onload="initWebGL();">

    <canvas id="PsychoVision3D-Canvas" width="728" height="500"></canvas>

    </body>
    </html>

では「制御」→「実行」メニューを実行してください。
実行しましたが、水色の画面が出るだけです・・・。

はい、まだ初期化だけで水色の画面で何も表示されていません。

これらは3Dゲームを作る際のテンプレートとなるスクリプトです。特に変更の必要はないので意味はわからなくて大丈夫です。

でもとりあえず説明はしておきます。

「<!DOCTYPE html>」はhtml5の宣言です。

「<html lang="ja">」〜「</html>」の間にhtml言語を記述します。

「<head>」〜「</head>」の間にヘッダーを記述します。

「<meta charset="UTF-8">」でエンコードをユニコードに指定します。

「<title>サイコビジョン・スリーディー</title>」がWebページのタイトルです。

「<script type="text/javascript" src="lib/○○.js"></script>」でJavaScript言語で書かれたライブラリを読み込みます。

「<script type="text/javascript">」〜「</script>」の間にJavaScript言語のスクリプトを記述します。

「function beginWebGL()」でWebGLを開始します。

「function drawWebGL()」は毎フレーム呼ばれる関数です。

「_eye = new Vector3D(0,150,500);」はカメラ視点です。

「_lookAt.y = 160;」はカメラ注視点です。

「_mvMatrix.lookAtCamera(_eye,_lookAt,new Vector3D(0,1,0));」でカメラを視点から注視点に向けます。

「function onMouseDown(event)」はマウスが押されたら呼ばれます。

「function onMouseUp(event)」はマウスがリリースされたら呼ばれます。

「function onMouseMove(event)」はマウスが動いたら呼ばれます。

「function onKeyDown(event)」はキーが押されたら呼ばれます。

「function onKeyUp(event)」はキーがリリースされたら呼ばれます。

「<body onload="initWebGL();">」〜「</body>」の間に本文を記述します。「onload="initWebGL();"」でWebGLを初期化します。

「<canvas id="PsychoVision3D-Canvas" width="728" height="500"></canvas>」でWebGLの3D画面を表示するキャンバスを記述しています。

### 次へ