3DCGエンジンThree.jsのサンプルゲーム


three.min.js」を用意します。
https://threejs.org/のメニュー「download]リンクからライブラリをダウンロードします。ダウンロードしたthree.js-master.zipを展開して、その中のフォルダ「build」の「three.min.js」をコピーします。
新規作成で新しいフォルダを作り、「testgame」など名前を付けて下さい。そこに「three.min.js」をコピーして保存して下さい。メモ帳を開き、下記のソースリスト2つもコピーして「index.html」、「main.js」の名前を付けて文字コードUTF8でペーストして、作成したフォルダに保存して下さい。このフォルダだけでゲームを実行出来ます。
three.jsは、ローカルの環境では画像を貼り付ける事が出来ません。
three.jsは3Dグラフィックスを描画するためのエンジンで、他のゲームエンジンと共に使うと効果的です。
出来上がったものは下記からも実行できます。スマートフォンでも動作します。
https://gamemade.xyz/threetest1/index.html

index.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>three.js game</title>
</head>
<body ontouchmove="event.preventDefault()">
<script src="three.min.js"></script>
<div id="js-engine" class="engine"></div>
<script src="main.js"></script>
</body>
</html>

main.js

(function () {
    var MAP = [//コースの2次元配列
      [1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2],
      [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 3, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 3, 2, 2],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 0, 1, 1, 0, 3, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 3, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 2],
      [1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 3, 2, 2],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 3, 2, 2, 0, 2, 2, 2, 0, 3, 2, 2],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 2],
      [1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 4, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 4, 1, 1, 1, 0, 1, 1, 0, 1, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 3, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 2],
      [1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 3, 0, 2, 0, 0, 0, 0, 0, 2, 0, 3, 0, 0, 0, 3, 0, 2],
      [1, 0, 1, 1, 0, 3, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 3, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 2, 2, 0, 2, 0, 2],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 3, 2, 3, 2, 0],
      [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 0, 2, 0, 2, 0, 1, 0, 1, 0, 2, 0, 2, 0, 1, 0, 3, 0, 0, 0, 0, 0, 3, 0, 3, 0, 0, 4, 0, 0, 3, 3, 0, 3, 0, 0, 0, 0, 0, 3, 0, 3, 0, 0, 0, 0, 0, 3],
      [1, 0, 0, 3, 0, 0, 1, 0, 1, 0, 0, 3, 0, 0, 1, 0, 2, 0, 0, 4, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 4, 0, 4, 0, 2, 0, 2, 0, 0, 4, 0, 0, 2],
      [1, 0, 2, 0, 2, 0, 1, 0, 1, 0, 2, 0, 2, 0, 1, 0, 3, 0, 0, 0, 0, 0, 3, 0, 3, 0, 0, 4, 0, 0, 3, 0, 0, 3, 0, 0, 0, 0, 0, 3, 0, 3, 0, 0, 0, 0, 0, 3],
      [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 3, 2, 3, 2, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 3, 2, 0, 2, 0, 0, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 3, 2, 3, 2, 0],
      [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 0, 0, 2, 0, 0, 1, 0, 1, 0, 0, 2, 0, 0, 1, 0, 3, 0, 0, 0, 0, 0, 3, 0, 3, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 4, 0, 0, 3, 0, 3, 0, 0, 0, 0, 0, 3],
      [1, 0, 2, 3, 2, 0, 1, 0, 1, 0, 2, 3, 2, 0, 1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 2, 0, 4, 0, 4, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 4, 0, 0, 0],
      [1, 0, 0, 2, 0, 0, 1, 0, 1, 0, 0, 2, 0, 0, 1, 0, 3, 0, 0, 0, 0, 0, 3, 0, 3, 0, 0, 0, 0, 0, 3, 0, 0, 3, 0, 0, 4, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 3],
      [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 2],
      [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 0, 2, 3, 2, 0, 0, 0, 0, 2, 3, 2, 3, 2, 0, 0, 0, 2, 3, 2, 3, 2, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 2, 1, 1, 0, 1, 2, 1, 0, 2, 1, 1, 0, 2, 1, 2, 0, 1, 1, 1, 0, 0, 1, 1, 0, 2, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1],
      [1, 0, 0, 0, 2, 0, 2, 0, 4, 2, 2, 2, 3, 0, 1, 0, 1, 2, 0, 0, 2, 0, 1, 0, 2, 0, 0, 2, 0, 0, 1, 0, 0, 1, 0, 0, 2, 0, 0, 1, 0, 2, 2, 2, 3, 0, 0, 1],
      [0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1],
      [1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 2, 0, 0, 2, 2, 2, 0, 2, 0, 2, 0, 2, 2, 0, 2, 2, 2, 0],
      [1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 2, 0, 0, 1, 0, 2, 0, 2, 0, 1, 0, 1, 2, 0, 2, 0, 0, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 2, 0, 0, 0, 0, 1],
      [1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 2, 0, 0, 2, 2, 2, 0, 2, 2, 1, 0, 2, 2, 0, 2, 2, 1, 2]
    ];
    //自機
    const playerCar = Car();//ファンクションで定義
    //地面
    const geometry = new THREE.PlaneGeometry(48 * 26, 48 * 26);
    const material = new THREE.MeshBasicMaterial({ color: "floralwhite", side: THREE.BackSide });//裏返さなければ透明
    const plane = new THREE.Mesh(geometry, material);

    let right = false;//右回転
    let left = false;//左回転
    let up = false;//上前進む
    let down = false;//下前進む
    let one_quarter = window.innerWidth / 4;//画面横幅の4分の1

    //three.jsシーン
    const scene = new THREE.Scene();

    //light環境光源
    const ambient = new THREE.AmbientLight(0xffffff, 1.0);
    scene.add(ambient);
    //camera THREE.PerspectiveCamera(視野角, アスペクト比, near, far);
    var camera = new THREE.PerspectiveCamera(45,innerWidth / window.innerHeight, 1, 2000);
    camera.position.y = 100;//カメラの地面からの高さ
    //rendering
    const renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x87CEEB, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = false;
    document.body.appendChild(renderer.domElement);

    //キー入力
    document.onkeydown = function (e) {
        e.preventDefault();//規定の動作をキャンセル
        if (e.key == 'ArrowUp') {up = true}
        if (e.key == 'ArrowRight') {right = true}
        if (e.key == 'ArrowLeft') {left = true}
        if (e.key == 'ArrowDown') {down = true}
    };
    document.onkeyup = function (e) {
        e.preventDefault();//規定の動作をキャンセル
        if (e.key == 'ArrowUp') {up = false}
        if (e.key == 'ArrowRight') {right = false}
        if (e.key == 'ArrowLeft') {left = false}
        if (e.key == 'ArrowDown') {down = false}
    };

    //スマホ入力
    window.addEventListener('touchstart', (e) => {
        e.preventDefault();
        for (var i=0;i<e.changedTouches.length;i++) {
          if (e.changedTouches[i].pageX > one_quarter * 3) {right = true}//画面幅3/4より大きい
          if (e.changedTouches[i].pageX < one_quarter) {left = true}//画面幅1/4より小さい
          if (e.changedTouches[i].pageX > one_quarter * 2 && e.changedTouches[i].pageX < one_quarter * 3) {up = true}
          //画面幅1/2から3/4
          if (e.changedTouches[i].pageX < one_quarter * 2 && e.changedTouches[i].pageX > one_quarter) {down = true}
          //画面幅1/4から1/2
        }
    },{passive: false});
    window.addEventListener('touchend', (e) => {
        e.preventDefault();
        for (var i=0;i<e.changedTouches.length;i++) {
          if (e.changedTouches[i].pageX > one_quarter * 3) {right = false}
          if (e.changedTouches[i].pageX < one_quarter) {left = false}
          if (e.changedTouches[i].pageX > one_quarter * 2 && e.changedTouches[i].pageX < one_quarter * 3) {up = false}
          if (e.changedTouches[i].pageX < one_quarter * 2 && e.changedTouches[i].pageX > one_quarter) {down = false}
        }
    },{passive: false});

    //最初にここから実行する
    plane.position.set(24 * 26, 0, 24 * 26);//地面をセットする
    plane.rotation.x = Math.atan2(1, 0);//地面を水平にする
    scene.add(plane);
    scene.add(playerCar);
    Initialset();//ファンクションInitialset()を実行
    playerCar.position.z = 26 * 4.5;
    playerCar.position.x = 26 * 4;
    playerCar.rotation.y = 0;
    renderer.setAnimationLoop(animation);//レンダラーにループ関数animationを登録

    //フレーム毎に繰り返し実行
    function animation() {
        if (right) { playerCar.rotation.y = playerCar.rotation.y - Math.PI / 36 }//右に回転
        if (left) { playerCar.rotation.y = playerCar.rotation.y + Math.PI / 36 }//左に回転
        if (up) {
            if (playerCar.position.y < 300) {playerCar.position.y = playerCar.position.y + 10};
            playerCar.position.x = playerCar.position.x + Math.cos(playerCar.rotation.y) * 10;
            playerCar.position.z = playerCar.position.z - Math.sin(playerCar.rotation.y) * 10;
        }//上前進む
        if (down) {
            if (playerCar.position.y > 0) {playerCar.position.y = playerCar.position.y - 10};
            playerCar.position.x = playerCar.position.x + Math.cos(playerCar.rotation.y) * 10;
            playerCar.position.z = playerCar.position.z - Math.sin(playerCar.rotation.y) * 10;
        }//下前進む
        camera.position.x = playerCar.position.x - Math.cos(playerCar.rotation.y) * 50;//カメラをplayerCarの後ろ上にセット
        camera.position.z = playerCar.position.z + Math.sin(playerCar.rotation.y) * 50;
        camera.position.y = playerCar.position.y + 100;
        camera.lookAt(playerCar.position);//playerCarにカメラを向ける
        renderer.render(scene, camera);//シーンとカメラで描画
    };

    function Initialset() {
        for (i = 0, max = MAP.length; i < max; i++) {
            for (j = 0, max2 = MAP[i].length; j < max2; j++) {
                //ビル1
                if (MAP[j][i] == 1) {
                    const matebrock1 = new THREE.Mesh(new THREE.BoxBufferGeometry(26, 80, 26), [
                        new THREE.MeshBasicMaterial({ color: 'chocolate' }),
                        new THREE.MeshBasicMaterial({ color: 'darkorange' }),
                        new THREE.MeshBasicMaterial({ color: 0xa5756b }), ,
                        new THREE.MeshBasicMaterial({ color: 'sienna' }),
                        new THREE.MeshBasicMaterial({ color: 'saddlebrown' })
                    ]);
                    scene.add(matebrock1);
                    matebrock1.position.z = j * 26 + 13;
                    matebrock1.position.x = i * 26 + 13;
                    matebrock1.position.y = 40;
                }
                //ビル2
                if (MAP[j][i] == 2) {
                    const matebrock2 = new THREE.Mesh(new THREE.BoxBufferGeometry(26, 140, 26), [
                        new THREE.MeshBasicMaterial({ color: 'dimgray' }),
                        new THREE.MeshBasicMaterial({ color: 'gray' }),
                        new THREE.MeshBasicMaterial({ color: 0x7c7c7a }), ,
                        new THREE.MeshBasicMaterial({ color: 'silver' }),
                        new THREE.MeshBasicMaterial({ color: 'darkgray' })
                     ]);
                     scene.add(matebrock2);
                     matebrock2.position.z = j * 26 + 13;
                     matebrock2.position.x = i * 26 + 13;
                     matebrock2.position.y = 70;
                }
                //ビル3
                if (MAP[j][i] == 3) {
                    const matebrock3 = new THREE.Mesh(new THREE.BoxBufferGeometry(26, 200, 26), [
                        new THREE.MeshBasicMaterial({ color: 'steelblue' }),
                        new THREE.MeshBasicMaterial({ color: 'royalblue' }),
                        new THREE.MeshBasicMaterial({ color: 0x928e3e }), ,
                        new THREE.MeshBasicMaterial({ color: 'midnightblue' }),
                        new THREE.MeshBasicMaterial({ color: 'navy' })
                    ]);
                    scene.add(matebrock3);
                    matebrock3.position.z = j * 26 + 13;
                    matebrock3.position.x = i * 26 + 13;
                    matebrock3.position.y = 100;
                }
                //ビル4
                if (MAP[j][i] == 4) {
                    const matebrock4 = new THREE.Mesh(new THREE.BoxBufferGeometry(26, 280, 26), [
                        new THREE.MeshBasicMaterial({ color: 'darkmagenta' }),
                        new THREE.MeshBasicMaterial({ color: 'purple' }),
                        new THREE.MeshBasicMaterial({ color: 0xc2c7cb }), ,
                        new THREE.MeshBasicMaterial({ color: 'indigo' }),
                        new THREE.MeshBasicMaterial({ color: 'darkslateblue' })
                    ]);
                    scene.add(matebrock4);
                    matebrock4.position.z = j * 26 + 13;
                    matebrock4.position.x = i * 26 + 13;
                    matebrock4.position.y = 140;
                }
            }
        }
    }

    function Car() {//自機定義
        const car = new THREE.Group();

        const geomain = new THREE.BoxBufferGeometry(10, 2, 20);
        //loader = new THREE.TextureLoader();texture = loader.load("player.jpg");
        const matemain = new THREE.MeshBasicMaterial({ color: "red" });
        //new THREE.MeshBasicMaterial({ map: texture });
        const main = new THREE.Mesh(geomain, matemain);
        main.position.set( 0, 0, 0);
        car.add(main);

        const geocabin = new THREE.BoxBufferGeometry( 8, 10, 6);
        const matecabin = new THREE.MeshBasicMaterial({ color: "deepskyblue" });
        const cabin = new THREE.Mesh(geocabin, matecabin);
        cabin.position.set(0, 2, 0);
        car.add(cabin);
        return car;
    }

    //three.js表示の上に文字を表示する
    container = document.createElement('div');
    document.body.appendChild(container);
    var info = document.createElement('div');
    info.style.position = 'absolute';
    info.style.left = '10%';
    info.style.top = '20%';
    info.style.width = '80%';
    info.style.color = "navy";
    info.style.fontWeight = "bold";
    info.style.fontSize = '3vw';
    info.innerHTML = 'PC:[→]右回転[←]左回転[↑]上前進む[↓]下前進む<br>スマホ:タッチ[左回転][下前進む][上前進む][上前進む]';
    container.appendChild(info);
    window.setTimeout(function () { info.innerHTML = ' ' }, 4000);//一定時間で表示を消す
})();