360°パノラマビュー

Implement the following web visual TECHNIQUE as a small, self-contained demo (single HTML file, inline CSS/JS; GSAP via CDN is allowed if it fits the recipe). Invent your own placeholder content (original text/shapes/colors) — do NOT copy any existing site's content or branding.

## Technique: 360 Panorama Viewer (360°パノラマビュー)

What happens: 展示室の内側から上下左右を見回し、4つの建築作品を選ぶ。方向指定・回転の停止・作品詳細への往復ができる。

## Implementation recipe (normative)

Three.jsのSphereGeometry(500,96,64)をgeometry.scale(-1,1,1)で内向きにし、4096×2048の実equirectangular画像をMeshBasicMaterialへ貼る。カメラは球の中心でPerspectiveCamera、初期yaw12°・pitch0°・縦FOV58°。方向は(sin(yaw)cos(pitch), sin(pitch), -cos(yaw)cos(pitch))。元画像はSTILLROOMという架空の展示室を独自の3D形状からレイ交差と4点の天窓照明で描いたもので、実在施設の写真や経路追跡レンダリングの主張ではない。4点の展示写真は既存のAI建築イメージを元の縦横比で額に収める。左右−180〜180°、上下±80°、FOV45〜80°を操作。マウスのドラッグと矢印キー5°刻み、Home、range、4作品の方向ボタンを備える。スマホは通常pan-yでページをスクロールでき、明示した「タッチで見回す」中だけtouch-action:noneで見回す。作品目印は実カメラの透視投影をDOMボタンへ反映し、背面・枠外では非表示。通常の作品一覧は常に使える。元の全体写真と説明を開き、同じ方向と元のボタンへ戻る。初期静止で、明示開始のときだけ8°/秒で回転し、停止・動き軽減・画面外・タブ非表示で停止。回転中の位置はメモリだけ、利用者が指定した方向・角度・FOVだけを設定保存と指示書へ渡す。素材は表示部分の可視時だけ取得してdecodeし、12秒の取得・decode期限、HTTP／寸法／GPU喪失に入力を保った明示再試行を用意する。正常な最初の描画後だけ表示成功とする。画像の読み込みとGPUを退場で解放し、戻ったら同じ方向の停止状態で再構築。DPR最大2、300万画素。無音、外部CDNなし。元画像を歪めた平らな帯やGIF、ドラッグを演じる図解で代用しない。実案件では権利を確認した全周素材へ差し替える。 全周素材: https://motion-palette.pages.dev/img/studies/stillroom-360-1e509a2185bb.webp（4096×2048、274616 bytes）。開始方向の参考図: https://motion-palette.pages.dev/img/studies/stillroom-view-13eb4ba181e4.webp。素材提供は実装コードのZIP同梱を意味しない。

## Rendering settings

This is a static visual treatment. Do not add a timeline, autoplay or nonfunctional playback controls. Preserve the material and color processing described in the recipe.

## Quality bar

- Runs at 60fps; animate only transform/opacity/filter where possible.
- Make the initial state legible immediately. Preserve the full timing above, including deliberately slow transitions. Repeat only when the recipe calls for a loop; give finite effects a clear ending and replay action.
- Respect prefers-reduced-motion: show a legible resting state without autoplay. Keep every operation available through keyboard and touch; allow deliberate playback of the effect for inspection.
- Difficulty reference: 高. If the recipe mentions specific libraries or shader work, follow it rather than substituting a simpler approach.

## 図鑑で選んだ実演設定（この値を優先）

レシピの標準値より、次の選択値を優先して実装してください。範囲の記述は操作の上限・下限として残します。

- 見る方向: 12°
- 見上げる角度: 0°
- 見える範囲: 58°

```json
{
  "yaw": 12,
  "pitch": 0,
  "fov": 58
}
```

この設定は自動再生を許可するものではありません。動き軽減時は静止から開始してください。