この演出について

説明

generate.py （bpyスクリプト）でローポリのファセットクリスタルクラスタをプロシージャル生成し、 model.glb としてエクスポート。Web側は Three.js の GLTFLoader で読み込み、キャンバスを fixed の背景レイヤーとして敷いた上で、ScrollTrigger の scrub でヒーロー〜最終見出しの全スクロール区間の進捗（0〜1）を、カメラのオービット角・距離、 モデル自体のY軸回転と浮遊（sin波のY位置オフセット）、ライティング強度、背景色（fog含む） にマップしている。カメラ距離はモデルのバウンディングスフィア半径から算出 （序盤・終盤は半径×3.1の引きでクラスタ全体を見せ、中盤は半径×1.7を下限に寄る山型カーブ）し、 モデルサイズが変わってもフレーミングが破綻しないようにしている。毎フレームの更新は requestAnimationFrame のレンダリングループ内で、ScrollTriggerが保持する最新の進捗値を参照する形にして負荷を抑えている。

3Dモデルの生成パイプライン

/Applications/Blender.app/Contents/MacOS/Blender -b -P generate.py でヘッドレス実行。デフォルトシーン（Cube/Light/Camera）を削除した上で Icosphereベースの頂点ジッターでファセット形状を作り、フラットシェーディング＋ シンプルなPBRマテリアル（ベースカラー＋メタリック/ラフネス）を付けて export_scene.gltf でGLB出力する。詳細な型は PLAYBOOK.md の「3Dアセットパイプライン（Blender）」セクション参照。

元ref

なし（参考サイト起点ではなく、Blender→Webパイプラインの実証が目的のデモ）

案件への移植メモ

demos/blender-gltf-hero/main.ts の [data-crystal-hero] ブロックと model.glb を、案件の src/animations/ と public/models/ へ移植する。three はランタイム依存が増える（バンドルサイズ増）ため、 案件側で他に3D演出を使わないなら npx npm@latest install three で追加する。3Dモデル自体を持ち込みたくない・依存を増やしたくない場合は、 Blenderでレンダリングした動画を demo-003（scroll-video-scrub）のパターンで スクラブ再生する代替案もある（PLAYBOOK.md参照）。GLBはLPでは500KB目安、 超える場合はDraco圧縮を検討する。