CAD → WEB — MECHANICAL SAMPLE

支給された1つのCADデータから、動くLPへ。

実在する火星ヘリコプターの公開CADを、コマンド1つで軽量化してスクロール演出に組み込んだ機械系サンプル。

3D Model: NASA 3D Resources / Courtesy NASA/JPL-Caltech

SCROLL

CRAFT — 01

二重反転ローターが、薄い大気を掴む。

カーボンファイバー製の2段ローター。互いに逆方向へ回り、地球の1%しかない大気で揚力を生む。

CRAFT — 02

頂部のパネルが、次の飛行を蓄える。

マストの頂点に据えられたソーラーパネル。1日の充電が、90秒の飛行になる。

CRAFT — 03

4本の脚が、未知の地表を受け止める。

しなる脚部が着地の衝撃を逃がし、金箔色の断熱材が胴体の電子機器を夜の冷気から守る。

ANATOMY

分解しても、構造は嘘をつかない。

  • SOLAR PANEL — マスト頂部の太陽電池。翌日の飛行を充電する。
  • ROTORS — 二重反転ローター。逆回転でトルクを相殺する。
  • FUSELAGE — 胴体。バッテリーと航法計算機を断熱材が包む。
  • LEGS — 4本の着陸脚。不整地へ斜め外側から接地する。

ONE ASSET

1つのGLBが、そのままヒーローになる。

画像の書き出しも動画のレンダリングも不要。CADが、そのまま演出の主役になる。

軽量化の実測値

公開CADはそのままではWebに重い。デシメートとテクスチャ縮小をスクリプト化し、 見た目を保ったままLPで使えるサイズに落とす。この工程も process.py としてコミットされていて、コマンド1つで再現できる。

FILE SIZE

2.0MB → 292KB

85%削減。Draco圧縮なし(Web側のデコーダー追加も不要)

POLYGONS

9,124 → 3,947

薄板パーツ(ローター・パネル)は控えめに、胴体は強めにデシメート

TEXTURES

≤ 512px

カーボン・金箔の質感は元のPBRマテリアルのまま、解像度だけ圧縮

図面のその先を、見せる。

製品のCADデータをお預かりできれば、同じ工程で「動くLP」に仕立てられます。 機械・プロダクトの構造そのものを、そのまま営業資産に。

この演出について

説明
demo-007(商品スクロールストーリーテリング)のレシピを「外部CADデータ」に応用した 機械系サンプル。process.py がNASA公式配布のGLB(2.0MB)をダウンロード後に取り込み、論理パーツへの再編成 (胴体系4ノードをjoinし8パーツ構成に)、デシメート(9,124→3,947ポリゴン)、 テクスチャ縮小(最大512px・WEBP)、分解アニメーションのキーフレーム焼き込みまでを 全自動で行い、292KB(-85%)の ingenuity.glb を出力する。分解は location のみキーフレームし rotation を焼かないことで、 Web側の AnimationMixer スクラブと毎フレームのローター回転(上下逆方向の 二重反転)が競合しない。カメラフレーミングは読み込んだモデルの バウンディングボックスから動的に構築しており、別のCADに差し替えても破綻しない。
元ref・出所クレジット
NASA 3D Resources(GitHub nasa/NASA-3D-Resources)配布の実機CADデータを使用。 3D Model: NASA 3D Resources (Ingenuity Mars Helicopter) / Courtesy NASA/JPL-Caltech。出所URL・ライセンス・加工内容の全記録は同フォルダの SOURCE.md 参照(本デモはNASAによる推奨・保証を意味しない)。
案件への移植メモ
クライアント支給のCAD(STEP等はBlenderでGLB化)を process.py の型(インポート→パーツ再編成→デシメート→テクスチャ縮小→分解キーフレーム→GLB)に 通し、main.ts[data-cad-scroll] ブロックを移植する。カメラリグはバウンディングボックス基準なのでモデル差し替えに 強いが、クラフト停留点の注視高さ(ローター/パネル/脚の比率)は製品の訴求パーツに 合わせて調整する。外部データを使う場合は必ず SOURCE.md を作り、 ライセンスとクレジット表記を確認すること(PLAYBOOK「外部3Dデータの利用ルール」)。
← ギャラリートップへ戻る