Playroom：レトロ3Dブラウザアーケード

「Playroom」という完全にプレイ可能なブラウザアーケードを構築してください。1980年代後半を思わせるノスタルジックなハードウェアの美学と、控えめで現代的なエディトリアルインターフェースを組み合わせます。レンダリングにはThree.jsを使用し、CRTモニター、コンソール本体、コントローラー、ゲームカートリッジにはそれぞれ別のGLBアセットを読み込んでください。静的なモックアップではなく、実際に動作する体験として仕上げます。 アートディレクション：温かみのあるオフホワイトの背景、経年感のあるアイボリー色のプラスチック、チャコールのディテール、くすんだセージグリーン、ダスティテラコッタ、色あせたブルーを使用してください。見出しにはSpace Grotesk、小さなラベルにはDM Monoを組み合わせます。細い区切り線、ゆとりのある余白、控えめな技術注釈、コンパクトなナビゲーションを加えてください。ネオン系サイバーパンクのスタイル、光沢のあるダッシュボードカード、過剰なグラデーションは避けます。 ホームページは、丁寧に配置されたプロダクト写真のように見せてください。CRTを右寄りに目立つように置き、左側にコンソールを配置します。コンソールにはカートリッジを1本、垂直にしっかり差し込み、手前にコントローラーを置いてください。機器同士は、実際のソケットにつながる曲線状のケーブルで接続します。柔らかな指向性ライト、自然な接地影、丸みを帯びたエッジ、わずかに粗さのあるプラスチックマテリアルを使用してください。オブジェクト同士が交差しないようにします。 ホームページには、左右へゆっくり移動するシネマティックなオービットを設定してください。ユーザーがドラッグして視点を回転できるようにし、操作後はアイドル動作へ滑らかに戻します。選択したハードウェアのディテールの周囲には、データパルスを控えめに、ゆっくり移動させます。CRTには、小さなマスコットが登場するピクセルアートの待機シーンをループ表示し、控えめな走査線と「PLAYER ONE」のタイポグラフィを加えてください。マスコットの顔には、提供された黄色のTと白色のVのロゴを正確に使用します。 目立つ「POWER ON」ボタン、またはコンソールのシーンをクリックすると、途切れのない1回のトランジションが始まるようにしてください。カメラをCRT画面へ近づけるようにイージングし、アニメーションするデータストリームを表示して、シーンを徐々にビューポート全体へ広げます。トランジション中は常に上下端を覆ってください。突然オーバーレイが現れたり、カメラが急にジャンプしたりしない、滑らかな暗転から明転への切り替えでカートリッジコレクションを表示します。 コレクションには、セージ色のSnake、テラコッタ色のBreakout、ブルーのBlocksという、特徴の異なる3本のカートリッジを垂直に配置します。それぞれに、くっきりしたカバーのタイポグラフィと、その上にちょこんと乗る小さなアニメーションマスコットを付けてください。わずかな上下動、ホバー時の浮き上がり、穏やかな傾きを使用します。3Dカートリッジのクリックと、その下に配置したアクセシブルなテキストボタンの両方に対応させます。 各選択項目から、プレイ可能なゲームインターフェースを開きます。Snakeにはフードチェーンと時間制ボーナスフルーツを実装します。Breakoutには複数のブリックレイアウトと、パドルまたはマルチボールのパワーアップを用意します。Blocksには次のピースのプレビュー、着地点を示すゴースト、ライン消去によるスコアリングを実装します。明確な操作説明、スコア表示、一時停止、リスタート、戻るためのナビゲーションを用意してください。キーボード操作とタッチボタンに対応し、ローカルにハイスコアを保存します。 画面内のコンテンツとカートリッジのラベルは、テキストが鮮明に保たれるよう、ランタイムテクスチャとして分離してください。インタラクションとマスコットのアニメーションに使うモデルパーツの名前を保持します。ローディング表示、3Dアセットの読み込みに失敗した場合でも使えるフォールバック、レスポンシブレイアウト、視認できるキーボードフォーカス、モーション低減設定への対応を含めてください。プロジェクトを整理して構成し、3種類のゲームとトランジションをすべて検証したうえで、GitHubとVercelへのデプロイに対応できる状態に仕上げます。