【パート１】Node.jsでWebオンライン3Dゲーム作ってみる｜ダウンロード不要

プログラミングをしている方の中で、3Dゲームを作ってみたいという人は意外と多いのではないでしょうか？

3Dゲームを作ると聞くと難しく感じるかもしれませんが、最新のゲームエンジンや便利なプログラミング技術が色々と出てきた影響で、意外と簡単にできてしまうらしいです。

3Dゲームを作るといったらunityのようなゲームエンジンで作成するのがメジャーだと思いますが、今回はNode.jsというバックエンドのプログラムと、HTML・CSS・JavaScriptなどを組み合わせて作っていきたいと思います。

1. 環境

・バックエンド：Node,js(JavaScript)
・フロントエンド：HTML, CSS, JavaScript
・その他：Three.js Socket.io

バックエンドは主にNode.jsで作成し、3D描画したりなどのフロント周りはThree.jsというJavaScriptライブラリで作成してきます。

2. 環境説明


環境について軽く説明していきます。

2-1. Node.js

Node,jsとは何かを簡単に説明するとバックエンドで動くJavaScriptです。

既存のJavaScriptの技術をそのまま使う事ができ、学習コストが低いだけでなく、Googleが開発をしている「V8」というエンジンを使用している事によって、他のインタプリンタ言語よりも高速です。

ライブラリも豊富であり、比較的簡単にオンラインの通信を行えたりもします。

2-2. Three.js

Three.jsはJavaScriptで書かれた3Dグラフィックライブラリです。

Three.jsを使用すると、Webブラウザ上で3Dオブジェクトを作成し、アニメーションを追加することができます。

Three.jsには、3Dオブジェクトの作成、マテリアルの設定、照明の追加、カメラの設定、アニメーションの追加など、多数の機能があります。

2-3. socket.io

socket.ioはクライアント同士でリアルタイムの通信を行う処理を簡単に実装できるライブラリです。

このsocket.ioを使用してオンラインの処理を実装できます。

3. プロジェクトフォルダの作成

以下のようにフォルダを作成します。 

      3d_game/
     └ index.html
     └ main.js

4. 3d空間の作成

まずはなれる事もかねて、簡単な3D空間を作成していきます。

まず、index.htmlに以下のコードを入力してください。

      <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <!-- three.jsを読み込む -->
      <script src="https://unpkg.com/three@0.142.0/build/three.min.js"></script>
      <!-- index.jsを読み込む -->
      <script src="main.js"></script>
    </head>
    <body>
      <canvas id="myCanvas"></canvas>
    </body>
    </html>

そして、main.jsに以下のコードを入力してください。 

      window.addEventListener('DOMContentLoaded', init);

    function init() {
      const width = 960;
      const height = 540;

      // レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas')
      });
      renderer.setSize(width, height);
      renderer.setPixelRatio(window.devicePixelRatio);

      // シーンを作成
      const scene = new THREE.Scene();

      // カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
      camera.position.set(0, 0, 1000);

      // 箱を作成
      const geometry = new THREE.BoxGeometry(100, 100, 100);
      const material = new THREE.MeshStandardMaterial({color: 0x0000FF});
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);

      // 平行光源
      const light = new THREE.DirectionalLight(0xFFFFFF);
      light.intensity = 2; // 光の強さを倍に
      light.position.set(1, 2, 3); // ライトの方向
      // シーンに追加
      scene.add(light);

      // レンダリング
      renderer.render(scene, camera);
    }

「レンダラー」や「シーン」など、あまり聞きなれない言葉があり理解するまで少し時間が掛かりました。

保存をしてからindex.htmlを実行すると、以下の画像のような物が表示されると思います。



少し分かりづらいかもしれませんが、真っ黒な部分が3Dの空間で、その空間の中に青い四角いキューブが配置されています。

5. パート１まとめ


途中3Dの描画に躓き過ぎて内容がかなり薄いですが、今回はここまでにしたいと思います。

次回以降でオンラインでの処理やアニメーションの描画などをしていきたいと思います。

人気のタグ一覧

関連記事

カテゴリー