音を生む構造まで、見せる時代へ。

この演出について

説明

demo-009（2段階分解+コールアウト+動的カメラリグ）と demo-007（RoomEnvironment IBL + ACES + 狭角FOVの製品写真的表現）のレシピをワイヤレスヘッドホンに応用したサンプル。 generate.py が9パーツ（ヘッドバンド/左右ヨーク/左右カップ外殻/左右ドライバー/左右イヤーパッド）を プロシージャル生成し、frame 0→30=左右カップ外殻が開く、30→60=全パーツ分解の 2段構成をキーフレームして headphones.glb に焼き込む。Blenderの glTF エクスポーターは 'SCENE' モードでもオブジェクトごとに 1クリップずつ出力するため、9本の AnimationClip が生成されるが、Web側は demo-009と 同様に1つの AnimationMixer に全クリップを載せ、 mixer.setTime() で一括スクラブすれば9本まとめて同期する（各クリップは同じ0〜60フレームの タイムラインを共有しているため）。カップの開閉軸が three.js の X軸（画面水平方向）と 一致する設計のため、demo-009のような俯瞰カメラは不要で、正面〜3/4視点のまま 「開いて中が見える」画がつくれる。ヘッドバンドのアーチは、centerline（点列）に沿って 断面リングをロフトし、各点の接線から求めた法線方向に断面を配置することで、曲がった 経路でも断面が常にチューブ表面へ垂直に立つ「曲面バンドのロフト」技法で作っている。 カラバリは MatShell の GSAPトゥイーン（demo-007方式）。

元ref

なし（完全自作のプロシージャルモデル。実在ヘッドホンメーカーの意匠・配色は避けた 架空ブランド「FERRO AUDIO」）

案件への移植メモ

音響機器・ウェアラブル・アイウェアなど「曲がったバンド/フレームを持つ製品」の営業LPに 移植できる。 make_headband_arch のcenterline点列と断面寸法を実製品の曲率に合わせて差し替えれば、眼鏡フレームや スマートウォッチのバンドにも応用できる。2段階分解の区割り（どこまでを「開き」で どこからを「分解」にするか）は製品の訴求ポイントに合わせて generate.py の キーフレームと main.ts のフェーズ定数を対で調整する。詳細は PLAYBOOK 「2段階分解（ハウジングオープン→全分解）の型」「曲面パーツのロフト型」参照。