BLENDER → WEB

砕けたモデルが、スクロールで別のかたちへ。

bpyスクリプトで自動生成した破片群を、Three.jsとScrollTriggerで再集合させる。モデルの生成からWebの演出まで、すべてコードで完結するパイプライン。

破片は、スクロールで集まりだす。

組み上がるのは、元とは違う形。

パイプラインの仕組み

3Dソフトの操作は不要。モデルの生成・破砕・エクスポートはすべて bpyスクリプトとしてコミットされていて、コマンド1つで再生成できる。

STEP 1

bpyでモデル生成

Blenderをヘッドレス実行し、スクリプトでモデルをプロシージャル生成。このページの破片群は、ランダム点群の凸包をクリスタルのシルエット内に詰めて生成している。

STEP 2

GLBエクスポート

破片1つ1つを個別ノードとしてGLB出力（このページは96破片で約190KB）。 LPで扱いやすい軽さを保つのがルール。

STEP 3

Three.js + ScrollTrigger

Webでは破片ごとに散乱位置と目標位置を持たせ、スクロール進捗で補間。目標位置は別形状の表面をサンプリングしていて、「元と違う形」に組み上がる。

Blender系デモ

このパイプラインで作った演出デモ。今後ここに増えていく（カタログは INDEX.md の blender タグ）。

demo-006 元ref: -

blender-gltf-hero

Blenderで生成したローポリ3DモデルをThree.jsで読み込み、スクロールでカメラオービット・浮遊回転・トーン変化させる

3d scroll scrub webgl gltf blender

demo-007 元ref: -

blender-product-story

Apple型の商品スクロールストーリーテリング。香水ボトルをカメラ回り込み→分解図→カラバリ切替で魅せるLPサンプル

3d scroll scrub webgl gltf blender

demo-008 元ref: NASA 3D Resources

blender-cad-ingenuity

NASA公式CADの火星ヘリを85%軽量化し、ローター回転・分解図・スペック訴求で見せる機械系サンプル

3d scroll scrub webgl gltf blender

demo-009 元ref: -

blender-power-tool

自作コードレスドリルのハウジングが開いて内部機構が見える2段階分解＋カラバリ。工具メーカー向け営業デモ

3d scroll scrub webgl gltf blender

demo-010 元ref: -

blender-headphones

自作ワイヤレスヘッドホンのカップが開いてドライバーが見える2段階分解＋カラバリ。ガジェットメーカー向け営業デモ

3d scroll scrub webgl gltf blender

demo-011 元ref: -

blender-tool-case

自作walnut×真鍮のツールケースのフタが開いて道具がせり上がる2段階分解＋木のカラバリ。クラフト/プロダクトブランド向け営業デモ

3d scroll scrub webgl gltf blender

demo-012 元ref: -

blender-lens-cutaway

自作の一眼カメラレンズがスクロールで輪切りになり、内部のガラス構成・絞り・フォーカス機構を断面図として露出する断面カット（クリッピング＋ステンシルキャップ）。光学/精密機器ブランド向け営業デモ

3d scroll scrub webgl gltf blender cutaway

photoreal 元ref: オメガデ・ヴィル

photoreal-watch-render

Cyclesパストレースで金属・ガラスを写真品質で描くフォトリアル静止レンダ。約40mm径の自作ドレスウォッチ（スタジオHDRIの映り込み＋物理マテリアル＋被写界深度）。時計/宝飾/化粧品ブランド向けヒーローカット

photoreal cycles render product blender

← ギャラリートップへ戻る