作業の進め方
isometric-animation は、平行投影の見た目を持つレイヤー図、積層図、分解図を作成します。少数の DOM シーンには CSS 変換、幾何学的インフォグラフィックには SVG、実際の遮蔽や影が必要なシーンには Three.js の正投影カメラを選びます。
このワークフローでは形状と奥行きを確認対象にします。積み重ねは物理的な順に作り、面の照明方向を揃え、離した層を正しい元位置へ戻す必要があります。固定時刻のプレビューで、誤った重なり、ちらつく面、組み立て不足を見つけられます。
想定される成果物
- 選んだ描画方式による、単独で動く HTML のアイソメトリックシーン。
- 時刻指定できる組み立て、または分解・再組み立てのシーケンス。
- 投影、奥行き順、最終位置合わせを示す代表的な静止画。
ブリーフからレビューまで
- 01投影と媒体を選ぶ
厳密な等角投影と、ピクセルアートの二等角投影の慣例を区別します。奥行きと遮蔽の要件に応じて CSS、SVG、正投影 3D を選びます。
- 02一貫した形状を作る
軸と面の陰影を統一します。奥行き方向に層を離し、物理的位置に従って表示順を決めます。
- 03固定時刻で組み立てを確認する
開始、途中、最終状態を固定します。動き全体を見る前に、重なり、欠け、層の着座位置を確認します。