お使いの環境はWebGLに対応していないため、3D演出を表示できません。
CAD → WEB — MECHANICAL SAMPLE
実在する火星ヘリコプターの公開CADを、コマンド1つで軽量化してスクロール演出に組み込んだ機械系サンプル。
3D Model: NASA 3D Resources / Courtesy NASA/JPL-Caltech
SCROLL
CRAFT — 01
カーボンファイバー製の2段ローター。互いに逆方向へ回り、地球の1%しかない大気で揚力を生む。
CRAFT — 02
マストの頂点に据えられたソーラーパネル。1日の充電が、90秒の飛行になる。
CRAFT — 03
しなる脚部が着地の衝撃を逃がし、金箔色の断熱材が胴体の電子機器を夜の冷気から守る。
ANATOMY
ONE ASSET
画像の書き出しも動画のレンダリングも不要。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」に仕立てられます。 機械・プロダクトの構造そのものを、そのまま営業資産に。
process.py
がNASA公式配布のGLB(2.0MB)をダウンロード後に取り込み、論理パーツへの再編成
(胴体系4ノードをjoinし8パーツ構成に)、デシメート(9,124→3,947ポリゴン)、
テクスチャ縮小(最大512px・WEBP)、分解アニメーションのキーフレーム焼き込みまでを
全自動で行い、292KB(-85%)の
ingenuity.glb
を出力する。分解は location のみキーフレームし rotation を焼かないことで、 Web側の
AnimationMixer スクラブと毎フレームのローター回転(上下逆方向の
二重反転)が競合しない。カメラフレーミングは読み込んだモデルの
バウンディングボックスから動的に構築しており、別のCADに差し替えても破綻しない。
SOURCE.md
参照(本デモはNASAによる推奨・保証を意味しない)。
process.py
の型(インポート→パーツ再編成→デシメート→テクスチャ縮小→分解キーフレーム→GLB)に
通し、main.ts の
[data-cad-scroll]
ブロックを移植する。カメラリグはバウンディングボックス基準なのでモデル差し替えに
強いが、クラフト停留点の注視高さ(ローター/パネル/脚の比率)は製品の訴求パーツに
合わせて調整する。外部データを使う場合は必ず SOURCE.md を作り、
ライセンスとクレジット表記を確認すること(PLAYBOOK「外部3Dデータの利用ルール」)。