# Café Pause（カフェ・ポーズ）— 操作マニュアル Three.jsで構築された、架空のレトロな日本の喫茶店を巡るスタンドアロン型の3Dウォークスルーです。すべてブラウザ上で直接レンダリングされるため、インストールの必要はありません。 ## シーンの開き方 モダンなデスクトップまたはモバイルブラウザ（Chrome、Safari、Edge、Firefox）で `cafe-pause-3d.html` を開きます。Three.jsライブラリおよびタイトル文字に使用されているGoogle Fontsを取得するため、初回読み込み時のみインターネット接続が必要です。一度読み込まれれば、部屋、テクスチャ、照明などの要素はすべてローカルで生成されるため、その後のネットワークアクセスは不要です。 3Dエンジンの初期化中、短い「Brewing the coffee…（コーヒーを淹れています…）」というローディング画面が表示されます。 ## 操作方法 | 操作 | 入力 | | --- | --- | | 視点を自由に見回す | 1度クリックした後はマウスを動かすだけ（ボタンを押し続ける必要はなく、向けた方向に視点が動きます） | | 視点を見回す（フォールバック） | 上記のフリー移動がブラウザで許可されない場合、クリック（またはタップ）しながらドラッグ | | カーソルの解除 | `Esc` キーを押す | | 前進 / 後退 | `W` / `S` キー、または画面上の上下矢印 | | 左右に平行移動（カニ歩き） | `A` / `D` キー、または画面上の左右矢印 | | 矢印キーでの移動 | 方向キー（↑↓←→）はWASDと同様に機能 | | タッチデバイスでの移動 | 画面右下にあるオンスクリーン十字キーを使用 | シーンをクリックすると、マウスによる視点操作（ブラウザのPointer Lock機能）が要求されます。許可されると、マウスを動かすだけで立っている場所から全方向に自由に視点を動かせます。カーソルを解放したい場合は、いつでも `Esc` キーを押してください。ブラウザや埋め込み先のページ設定（一部のサンドボックス環境など）でこれがブロックされている場合、自動的に「クリック＆ドラッグ」方式に切り替わるため、どちらかの方法で必ず操作できます。 画面上の十字キーは常に表示されており、デスクトップとモバイルの双方で機能します。物理キーボードが反応しない場合（ブラウザ側でページにキーボードフォーカスが当たっていない場合など）に最も確実な移動方法です。最初にシーン内の任意の場所を1度クリックすることでも、キーボード入力が効きやすくなります。 移動範囲は店内の床面に制限されています。外壁を通り抜けることはできません（家具の通り抜けは現バージョンでは可能です）。 ## シーン内の構成要素 * 昭和の喫茶店を象徴する、市松模様のタイル床とダークウッドの腰壁 * バーチェア付きのL字型木製カウンター、カップ棚、実際に炎が揺らめく2基のサイフォン式コーヒーメーカー * 梁のある天井から吊り下げられた、かすかに明かりが揺れる4つのティファニースタイルのステンドグラスペンダントライト * 3脚のレザーボックス席と、曲木椅子を備えた4つの独立したカフェテーブル（合計7席） * 柔らかく光る街並みを望む夜の窓と、入り口脇の「COFFEE」ネオンサイン * 空間を演出する壁掛け時計、額装されたアート、観葉植物 ## スマートフォンでの利用 スマートフォンやタブレットでも動作しますが、デスクトップとは以下の違いがあります。 * **視点操作**: スマートフォンはPointer Lock機能に対応していないため、指でタップ＆ドラッグして視点を動かします（デスクトップでPointer Lockが使えない場合のフォールバック操作と同じです）。 * **歩行移動**: 画面右下のオンスクリーン十字キーを使用します。スマートフォンにはキーボードがないため、これが基本の移動手段となります。 * **2本指での操作**: 視点操作と移動操作が分かれているため、「移動しながら視点を変える」には、多くのモバイルゲームのツインスティック操作のように、一方の親指で十字キーを操作し、もう一方の指で画面の別エリアをドラッグします。 * **パフォーマンス**: 照明と影をリアルタイムでレンダリングするため、ここ数年のスマートフォンで最も快適に動作します。旧型や低スペックの端末ではフレームレートが低下する場合がありますが、読み込みおよび操作自体は可能です。 * **画面の回転**: 縦向き・横向きの切り替えに対応しています。向きを変えると、少しの間を置いて自動的に画面サイズが再調整されます。 ## ファイルの共有と再利用 `cafe-pause-3d.html` は単一の自己完結型ファイルです。ファイル名の変更、メールへの添付、静的Webホスティング環境への配置がそのまま行えます。外部から読み込む2つのリソース（Three.jsとGoogle Fontsのスタイルシート）以外に依存関係はないため、その2つのホストにアクセスできる限り、どこでも動作し続けます。 ## トラブルシューティング * **操作ガイドがフェードインせず、暗い画面のまま動かない:** インターネット接続を確認してください。Three.jsのダウンロードに失敗している可能性があります。接続復帰後にページを再読み込みしてください。 * **部屋の端で移動が引っかかる感覚がある:** 正常な挙動です。カメラが壁の外に出ないよう制限されています。 * **フォントが意図された明朝／ゴシックの組み合わせではなく代替フォントで表示される:** Google Fontsのスタイルシートが読み込まれていません。シーンの動作自体に問題はなく、タイトル部分の見た目のみに影響します。