This app was developed as a work for this programming contest.

審査員の方向けの情報

開発環境

• Ubuntu 22.04.4

• Node.js 20.14.0

• TypeScript 5.4.5

主な使用ライブラリ

• Next.js

  Reactフレームワーク

• Material UI

  React用コンポーネントライブラリ

• Zustand

  React用状態管理ライブラリ

• React Three Fiber

  Three.js用Reactレンダラー

• React Three Drei

  React Three Fiber用拡張ライブラリ

• gltfjsx

  元のGLTFを軽量化し、React Three Fiber用JSXに変換するツール

• React Three Rapier

  物理エンジンRapierのReact Three Fiber用ラッパー

プロジェクト構成

• Next.jsのApp Router版の構成に従っています。

• /src/text-alive内のエントリーファイル : Player.tsx

• /src/game内のエントリーファイル : Game.tsx

補足

• /public/models内のGLTFはgltfjsxで軽量化し、useLoaderのプリロード機能を使い、読み込み時間を短縮しています。

• /public内のフォントデータは、Facetype.jsで歌詞に必要な文字だけに絞ってサブセット化を行い、読み込み時間を短縮しています。

• MMDモデル内の物理演算には、/public/libs内のammo.jsを使用しています。

• SNSでの共有を想定して、OGPに対応しています。

• 操作性やスペックの都合上、スマートフォンやタブレットではプレイできません。

• 以下のパソコンのChrome上で動作することを確認しました。ただし、スペックによっては多少動作が重くなることがあります。

  • MacBook Pro(M1 / 16GB)

  • MacBook Air(M2)

  • Windows(Intel Core i7 14世代 / 64GB)

  • Windows(Intel Core i5 12世代 / 8GB)

  • Windows(Intel Core i7 10世代)