Three.jsで3Dテトリスを作ろう！

このゲームはJavascriptの3DライブラリであるTree.jsを使って作成しています。スマホからも操作可能です。

めんどうな開発環境の設定もしなくていいように、1枚のHTMLファイルだけで動作するようにしています。

事前に知っておいたほうが良い知識

	PC	スマホ
回転	ドラッグ	ドラッグ
ズーム	ホイール操作	ピンチアウト
視点移動	右ボタンドラッグ	ピンチ操作

Javascriptの基礎（変数や関数の使い方、DOMの操作方法など）
Three.jsの基礎（立方体を表示する方法など）

プログラムの概要

今回は三次元配列にThree.jsのオブジェクトを生成してそれを表示したり透明にしたりしてブロックの動きを表現します。

イメージとしては電光掲示板です。LEDを均等に配置してそれを点灯したり消灯したりして文字や絵を表現します。

それを三次元にしたのが今回のゲームです。たとえば、ブロックが次のような状態にあったとします。


{ x:1, y:5, z:1 }
{ x:1, y:5, z:2 }
{ x:2, y:5, z:1 }


{ x:2, y:0, z:0 }

のマス目を青色で表示させて、それ以外のマス目を非表示にさせています。

HTMLファイルの作成

まず、自由な場所にindex.htmlを作成して、次のように書き込みます。

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3Dテトリス</title>
    <style>
        body {
            margin: 0;
        }
        /* ゲーム画面をレスポンシブにする */
        canvas {
            display: block;
            width: 100%;
            border-radius: 8px;
        }
    </style>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
        }
      }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
    // -----------------------↓この中にプログラムを書いていく-------------------------
    
    // ----------------------------------------------------------------------------
    </script>
</head>
<body>
    <canvas id="three-canvas"></canvas>
    <div>
        <button id="start-button">スタート</button>
        <button id="stop-button">ストップ</button>
        <button id="reset-button">リセット</button>
    </div>
    <div>
        <div>移動</div>
        <button class="move-button" value="left">←</button>
        <button class="move-button" value="back">↑</button>
        <button class="move-button" value="front">↓</button>
        <button class="move-button" value="right">→</button>
    </div>
    <div>
        <div>回転</div>
        <button class="rotate-button" value="left">←</button>
        <button class="rotate-button" value="back">↑</button>
        <button class="rotate-button" value="front">↓</button>
        <button class="rotate-button" value="right">→</button>
    </div>
</body>
</html>

スマホからでも遊べるように、 canvas に width: 100% を設定してゲーム画面をレスポンシブにしています。

Three.jsを利用する方法はいくつかありますが、一番手軽で最新版のすべての機能を利用できるようにするには、上記のようにscriptを設定します。

一般的にはHTMLファイルとJSファイルは分けて書きます。しかしこの場合、ファイルを分けてしまうとローカルサーバーを立てないとブラウザで表示できなくなってしまいます。

そのため、今回はHTMLファイルの中にJavascriptを書いていくという方法を取ります。

ここから先のプログラムは <script type="module"></script> の中に書いていきます。

Three.jsで3Dテトリスを作ろう！

遊び方

視点の操作方法

使い方

このゲームについて

事前に知っておいたほうが良い知識

プログラムの概要

HTMLファイルの作成