Three.jsとWebsocketを使用したリアルタイムでマルチプレイ可能な3D型ウェブサイトです。
同じブラウザでも複数のタブでアクセスすればプレイヤーが同期されます。
Three.jsのWEBGLレンダラーとCSSレンダラーを混在させて3D空間にhtmlのWEBページを配置して面白い表現をしてみたいと思い制作しました。
Stack
- Node.js
- Three.js
- vite
- Cloudflare workers / D1 / Durable Objects
実装方法
全てのコードはクラスで管理し、DIパターンで実装しました。Init, World, Player, Input, Networkなどのクラスを作成し、保守性と拡張性を高めています。
Cloudflareの無料枠内でなら完全に無料で運用可能な実装にしてあります。
こだわった点
-
物理エンジン
最初は物理エンジンにRapire.jsを使用していましたが、そこまで物理演算にこだわらなくてもいいかなと思い、Three.jsのOctreeを使用し、最低限の衝突判定のみを行うようにしました。
-
軽量化
ゲームループ内でインスタンスは作らないこと、前のフレームと現在のフレームを比較して相違が無ければ演算をスキップする、モーションデータとスキンデータを分ける、モデルのローポリ化などできる限り軽量化を意識して制作しました。
-
Websocket
はじめは映画「サマーウォーズ」を見て今ならOZのようなものを作れるのではないかがきっかけだったので、Websocketを使用してリアルタイムでマルチプレイ可能な3D型ウェブサイトを制作しました。
CloudflareのDurable ObjectsのHibernation APIを使用して、プレイヤーの位置やアクションなどの状態を管理し、全てのクライアントにリアルタイムで同期させるようにしました。