isometric-animation

アイソメトリック（2.5D）アニメーション

アイソメトリックなシーンを使うと、実際の遠近法を使わずに、解説動画や UI のウォークスルー、インフォグラフィックに立体感を加えられます。各軸の短縮率を揃え、Z 層を積み重ね、ブロックを押し出し、分解図を作成します。幾何学的で意図の明確な表現です。奥行きは一貫した軸と面ごとのシェーディングから生まれ、動きは一度に 1 層ずつ構造を見せることで生まれます。

使用する場面

• 解説動画、製品 UI、「仕組み」を説明するインフォグラフィック向けの 2.5D シーン。
• 下から上へ組み上がる、積層レイヤー／フロア／技術スタックのタワー。
• 押し出しブロック、アイソメトリックグリッド、アイソメトリックな街並み／サーバーラックのシーン。
• Z 軸に沿って分解し、再び組み立てる分解図。
• わずかな動きを加えたい静的なアイソメトリックイラスト：カメラのドリフト、視差、ホバー時の浮き上がり。

投影法：まず軸を正しく設定する

2 つの方式があります。どちらか一方を選び、決して混ぜないでください。

• 真のアイソメトリック — 3 軸がすべて 120° 間隔で、画面上の X/Y の地面軸は**水平から ±30°**の角度になります。数学的に正しいアイソメトリックです。CSS/Three.js で使います。
• 2:1 ディメトリック（「ピクセルアート風アイソメトリック」） — タイルを幅 2：高さ 1 で描くため、軸は約 26.57°（atan(0.5)）になります。ピクセルが整いやすく、ゲームアートの標準です。タイル／スプライトのシーンで使います。

DOM/SVG で真のアイソメトリック平面を最も手早く作るには、perspective: none のコンテナ（正投影のような見た目）に CSS 3D 変換を適用します。

.scene { transform-style: preserve-3d; }
/* rotate a flat plane onto the iso ground */
.iso-plane { transform: rotateX(60deg) rotateZ(45deg); }

rotateX(60deg) rotateZ(45deg) は平面要素を 60° 奥へ傾けてから 45° 回転します。これは標準的な「真のアイソメトリック」変換の組み合わせで、画面上の地面軸が ±30° になります。.iso-plane 上に配置した平面 SVG/DOM（間取り図、UI モック、グリッドなど）はアイソメトリックな面になります。子要素を translateZ() でカメラ側に持ち上げてください。

コードでタイルを配置するときの、同等のグリッドから画面への変換計算（2:1 ディメトリック）：

// tile (col, row) → screen pixels, TILE = full tile width
const screenX = (col - row) * (TILE / 2);
const screenY = (col + row) * (TILE / 4);

perspective はオフにする（または非常に大きくする）必要があります。アイソメトリックは平行投影なので、遠くのオブジェクトが小さくなってはいけません。perspective を小さくすると、アイソメトリックではなく、傾いた 3D カードのように見えます。

シーンの作成

Z 層の積み重ね（カード／フロア）

各レイヤーはアイソメトリック平面上の同じ平面形状で、Z 軸に沿って間隔を空けます。後のレイヤーほど高くし、下から順に表示します。

<div class="scene"><div class="iso-plane">
  <div class="layer" style="--z:0">  </div>
  <div class="layer" style="--z:40"> </div>
  <div class="layer" style="--z:80"> </div>
</div></div>

.layer { transform: translateZ(calc(var(--z) * 1px)); }

押し出しブロック（面＋面ごとのシェーディングで奥行きを表現）

立体ブロックは上面と、見える 2 つの側面で構成されます。目に立体感が伝わるよう、面ごとに陰影を付けます。固定した光の向きに合わせて、上面を最も明るく、左側面を中間の明るさに、右側面を最も暗くします。これが、アイソメトリックの奥行きに説得力を持たせる最も重要なコツです。

.block .top   { background:#3a9bff; }              /* lit   */
.block .left  { background:#2c78c8; transform: rotateY(-90deg); transform-origin:left; }
.block .right { background:#1f5896; transform: rotateX(90deg);  transform-origin:bottom; } /* shade */

SVG でも同じシェーディングルールを使います。3 つのポリゴン（上面のひし形、左側面と右側面の平行四辺形）を描き、明・中・暗の色で塗りつぶします。小さなブロックが多数ある場合、SVG のほうが 3D-CSS より簡単なことがよくあります（参考資料を参照）。

アイソメトリックグリッド

床のグリッドは、.iso-plane 上に 2 組の平行線を引くだけです（線を平面に描き、回転させることでアイソメトリックになります）。SVG 上に平面の状態で作成してから平面に配置し、stroke-dashoffset を使って線が描かれていくアニメーションを付けます。

分解図

積層レイヤーと同じですが、初期状態ではZ 軸に沿って分解されています。組み立てるには、各レイヤーの translateZ を所定の位置までアニメーションさせます。分解するには逆方向に動かします。スタック全体をまとめて開閉できるよう、共通の --gap 変数を 1 つ使います。

モーション

目標	仕組み	イージング
レイヤーの表示（組み立て）	各レイヤーの opacity と下方からの translateZ を段階的に適用	back.out(1.4)、0.12s 間隔
分解／組み立て	共通の --gap（または各要素の translateZ）をトゥイーン	power3.inOut、0.7～1s
塔／スタックの組み立て	レイヤーを下から上へ順に落とし込む	back.out(1.5)、0.15s 間隔
カメラのドリフト	.scene の rotateZ／translate をゆっくり変化させ、ヨーヨー再生でループ	sine.inOut、6～12s
パララックス	ポインター／スクロールに応じて、レイヤーを奥行きに応じて移動（--z ∝ 移動量）	power2.out
ホバー時の浮き上がり	1つのブロックに translateZ(+12px) と柔らかな影を適用	power2.out、0.25s

アイソメトリックとして見せるためのルール：

• 高さを表現するために拡大縮小せず、Z 軸方向に持ち上げます。拡大縮小すると平行投影が崩れます。
• カメラのドリフトはごくわずかでゆっくり（数度／数ピクセル）にします。大きく動かすと、平面であることが分かってしまいます。
• 組み立ての順番は DOM の順序ではなく、物理的な位置（一番下のレイヤーから）に基づいて段階的にします。これにより、構造が論理的に組み上がります。
• シーン全体で光の向きを固定し、すべてのブロックが同じ向きに陰影を付けるようにします。

Three.js OrthographicCamera（真の3Dアイソメトリック）— 代替案

ブロックを正しく遮蔽させたり、実際の影を落としたり、3Dで回転させたりする必要がある場合は、orthographic カメラ（平行投影＝真のアイソメトリック。PerspectiveCamera はアイソメトリックではありません）の下で実際のジオメトリを使用します。

const aspect = innerWidth / innerHeight, d = 8;
const cam = new THREE.OrthographicCamera(-d*aspect, d*aspect, d, -d, 0.1, 100);
cam.position.set(10, 10, 10);   // equal X,Y,Z → classic iso vantage
cam.lookAt(0, 0, 0);

position の各成分を等しくすると30°のアイソメトリック視点になり、OrthographicCamera では遠くのオブジェクトも同じ大きさに保たれます。光を一方向から当てて影を有効にし、組み立て時には mesh.position.y を段階的に変化させるか、縮小状態から拡大します。セットアップ全体は参考資料をご覧ください。

ビルドツールの選択

• CSS 3D transforms — 面に鮮明な DOM／テキストを表示する、少数のブロック／レイヤーに最適です。HTML ファイル1つで構成できます。
• Inline SVG（アイソメトリックのポリゴン） — 多数の小さなブロック、グリッド、インフォグラフィックに最適です。GSAP／CSS で最も簡単にアニメーションでき、3D変換による Z ファイティングも発生しません。
• Three.js + OrthographicCamera — 実際の遮蔽、影、3D回転が必要な場合に最適です。CDN を使えば、こちらも HTML ファイル1つで配布できます。
• ピクセル／タイル（2:1） — ゲームアートやマップのシーン向けです。(col-row, col+row) の投影を使用します。

出力チェックリスト

• 軸が正しい角度になる（真のアイソメトリックでは ±30°、2:1 では約26.57°）。意図しない遠近による縮小がない。
• すべてのブロックに、固定された1つの光源に基づいて、上面は明るく、側面の一方は中間、もう一方は暗く陰影を付ける。
• レイヤーが自然な奥行きで積み重なる。Z ファイティング、面のちらつき、重なりの誤りがない。
• 組み立ては物理的な位置（下から上）に基づいて段階的に行い、1つの拍につき1つのアイデアにする。
• カメラのドリフトは小さくゆっくりにする。分解／組み立てでは、すべてのレイヤーが正確な位置に収まる。
• prefers-reduced-motion では、ループするドリフトを行わず、組み立て後のシーンを表示する。

配布と検証（単独の HTML）

同梱ヘルパー（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 は ?t=N ハーネスを使って指定した各時点でアニメーションを停止し、スクリーンショットを撮影します。scripts/contact-sheet.sh sheet.png frame-*.png はそれらを一覧できるシートにまとめます。詳しくは scripts/README.md を参照してください。

自己完結型のアイソメトリックシーン（積み上げ、分解図、漂うインフォグラフィック）では、成果物はブラウザーで直接開ける単一の HTML ファイルです。ビルド手順も、フレームワークも、レンダーパイプラインも必要ありません。Web モーションには単一ファイルが適しています。どうしても 1 ファイルに収められない場合に限り、バンドラーを使いましょう。（シーンがレンダリング動画の一部である場合は、代わりに Remotion コンポジションとして構築し、remotion still で検証してください。）

出力の要件：

• CSS 3D 変換またはインライン SVG（あるいは CDN 経由の Three.js）、マークアップ、およびすべてのモーションを、1 つのマスタータイムライン（const tl = gsap.timeline()）上の単一のインライン <script> に含む 1 つの .html ファイル。シークできる単一の再生ヘッドを使います。
• 任意の時点で停止してスクリーンショットを撮れるよう、シーク用ハーネスを含めます。

シーク用ハーネス — スクリーンショット撮影のため、正確な時点で停止します。 フレームを固定する処理に相当する Web の仕組みです。?t=N でマスタータイムラインを N 秒までシークして一時停止するため、スクリーンショットは再現可能な静止画になります。

<script>
  // ... build your master timeline as `tl` (the layer build / explode / drift) ...
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) { tl.pause(); tl.seek(parseFloat(t)); }  // frozen at t seconds
  // no ?t → plays normally
  window.__ready = true;            // ready signal for headless wait
  console.log("duration", tl.duration());
</script>

GSAP タイムラインを使わない Three.js シーンでは、単一の clock／進行度の値から構築を制御し、?t=N からその値を設定して 1 フレームをレンダリングします。同じ考え方で、再現可能な静止画を作ります。

検証ループ — レンダリング → 停止 → スクリーンショット → 確認：

1. ファイルを 3 つの時点（開始、中間、終了）で開きます。 …/iso.html?t=0、?t=<dur/2>、?t=<dur>（コンソールで tl.duration() を確認します）。
2. 各停止フレームをヘッドレスでスクリーンショット撮影します。

   npx playwright screenshot --wait-for-timeout=500 "file://$PWD/iso.html?t=1.2" frame-mid.png
   

3. 投影を確認します。「アニメーションするか」だけでは不十分です：
   • 軸 — 地面の線は意図した角度（真のアイソメトリックでは ±30°／ディメトリックでは約 26.57°）で描画され、垂直線は垂直のままで、何も遠近法のように短縮されていないこと。
   • 奥行き — レイヤーが正しい Z 順で積み重なり、ブロックが正しく互いを隠し、面ごとの陰影で立体感が伝わること。Z ファイティング（重なった面のちらつき）や重なりのエラー（背面のブロックが前面を突き抜けること）がないこと。
   • 組み立て — 中間フレームでは積み重ねが物理的な順序で途中まで組み立てられ、終了時にはすべてのレイヤーが正確に収まっていること（完全に閉じた状態）。トゥイーンの途中で位置がずれたままにならないこと。
   • アーティファクト — 面上のテキストの切り抜けや傾き、キャンバス外のブロック、フォント読み込み前の FOUC、ギザギザのグリッドの継ぎ目。
4. 調整します。角度、陰影、Z 順を修正し、同じ ?t の値で再度停止してスクリーンショットを撮り、立体的なアイソメトリックとして違和感なく見えるまで繰り返します。

完了前に確認すること：

1. ブラウザーで単独で開けること。コンソールエラーや CDN の読み込み漏れがないこと。
2. マスタータイムライン（または単一の Three.js 進行度の値）を使い、?t=N で再現可能な静止画に停止できること。
3. 開始／中間／終了時点のスクリーンショットがあり、軸、奥行き／Z 順が正しく、Z ファイティングがなく、組み立てが正確に収まること。
4. 1 つの固定光源からの面ごとの陰影に一貫性があり、意図しない遠近法による縮小がないこと。
5. prefers-reduced-motion の場合、ドリフトをループさせず、組み立てが完了したシーンを表示すること。

参考ファイル

• references/isometric-recipes.md — より詳しい実行可能なコードを収録しています。投影の計算（真のアイソメトリックと 2:1 ディメトリック、変換と行列）、フラットな SVG／DOM からアイソメトリック平面への変換、面ごとの陰影を付けた押し出しブロック（CSS と SVG）、積み重ねと分解図のアニメーション、アイソメトリックグリッド、カメラのドリフト／視差／ホバー、および OrthographicCamera を使った完全な Three.js アイソメトリックシーンを紹介します。イージングの注意点とモーション低減への対応も含まれています。