nachoiannella/scroll-3d-landing

スクロールで変化する3Dランディングページ（あらゆるオブジェクト対応）

このスキルは、3Dオブジェクトが主役となるワンページランディングページを構築するためのものです。オブジェクトはコンテンツの背後に固定され、ユーザーがスクロールするにつれてポーズ、レンダリングスタイル、コンテキストが変化します。ワインボトル、ヘッドホン、椅子、ギター、時計、自動車、建物の模型、彫刻、古いカメラ、香水瓶、工具、おもちゃなど、あらゆるものを3Dオブジェクトとして表示できます。

参考事例はtoppervenom.com（Evil Rabbit作、元の投稿）です。このスキルはそのプロジェクトから着想を得ています。このサイトでは、90年代のTopperバスケットボールシューズを表示しています。その3Dモデルはスキャンではなく、アーカイブ資料と生成画像からAIを使って再構築されたものです。ページは設計図（青いグリッド上の白いワイヤーフレーム）から始まり、実際の素材で「塗りつぶされ」、サイズやパーツが表示され、色が変わり、最後に回転します。シューズはあくまで一例です。再現されるのは、ページの構築方法とその品質レベルです。 各プロジェクトは、独自のビジュアルコンセプト、シーケンス、オブジェクトに最も適した表示効果を選択します（以下の「オブジェクトに合わせた調整」を参照）。

なぜこれらのウェブサイトは見た目が優れているのか（始める前に読んでください）

品質はスタックから生まれるわけではありません。toppervenom.comは約90KBのHTML/CSS/JSとThree.jsで構成されています（作者によれば、ページはAIが一気に生成したものです）。フレームワークもGSAPもバンドラーもありません。品質は以下の5つの要素から生まれます。プロジェクトのすべての決定は、これらのいずれかに貢献する必要があります。

1. 本物で適切に準備された3Dアセット。 写真テクスチャを持つスキャン、手入れの行き届いたAI再構築（toppervenomのように）、または実際のディテールを持ち、クリーンで軽量、かつ実寸のモデル。モデルが悪ければ、他の何もそれを救えません。→ references/3d-capture.md、references/3d-alternatives.md
2. 写真撮影の考え方に基づくレンダリング。 スリーポイント照明、環境マップ、ニュートラルなトーンマッピング、コンタクトシャドウ、修正されたマテリアル（スキャンでは、レザーをプラスチックのように見せる偽のメタルネスが付属していることがよくあります）。→ references/rendering.md
3. 細部にまで行き届いたアートディレクションのコンセプト。 toppervenom.com の「設計図」：グリッド、寸法、モノスペースフォント、ローダーは「PLOTTING DRAWING Nº 01」と表示され、進行状況バーは「REV. 0 — BLUEPRINT」と表示されます。すべてが同じストーリーを語っています。→ references/art-direction.md
4. キーフレームではなく物理に基づく動き。 各セクションのポーズは宣言的に定義され、JSはsmoothstepで補間し、さらに各値を指数減衰で減衰させます。これにより、重みと慣性が生まれます。→ references/choreography.md
5. 3Dを正当化するシェーダーエフェクト。 ワイヤーフレームからソリッドへの表示切り替え（オブジェクトをスイープする平面を使用）、フレネルによるゴーストサーフェス、輝度による再配色など。これらは動画では実現できません。→ references/shaders.md

ユーザーが「このようなもの」を依頼した場合、実際の作業は次のとおりです。良いモデルを入手する + コンセプトを選択する + 忍耐強く調整する。テンプレートはエンジニアリングの問題を解決します。

オブジェクトに合わせた調整（スニーカーをコピーしない）

テンプレートにはサンプルシーケンス（設計図 → 寸法 → パーツ → 表示 → 数字 → 起源 → クロージング）が付属していますが、オブジェクトの形状とそのストーリーが、構図、エフェクト、そして各フェーズ（アクト）を決定します。ポーズを記述する前に、オブジェクトを次の表に分類してください。

オブジェクトの形状	例	構図	最適な表示効果	典型的なフェーズ（アクト）
水平に細長い	スニーカー、自動車、ギター、ナイフ、ペン、電車	オブジェクトを片側に、テキストを反対側に配置。寸法のためにプロファイルを表示	長手方向のスイープ（先端 → 尾部）	プロファイル図、パーツの詳細、スピードまたは使用例
垂直／回転体	ボトル、香水、ランプ、花瓶、トロフィー、建物	オブジェクトを中央または3分の1の位置に配置。テキストは両側に2列で配置。クライマックスでは見上げるようなアングル	下から上へのスイープ（「満たされる」）または断面表示	シルエット、素材または内容、起源、使用の儀式
コンパクト／箱型	ヘッドホン、カメラ、スピーカー、時計、ゲーム機、宝石	マクロのようにオブジェクトをなでるような大きなクローズアップ（scale 1.4–2）	分解図（展開図）または斜めスイープ	デザイン、内部/コンポーネント、素材、仕様
平面／正面から見るもの	本、レコード、絵画、基板、カード、タブレット	厚みを見せるための短い回転（±0.4 rad）。横向きの時間は短く	凝縮する点、または「現れる」ペイント	表面、裏面、テクスチャの詳細、コンテキスト
有機的／彫刻的	彫刻、食品、植物、化石、おもちゃ	ゆっくりとした広い回転。多くのエッジライト	点群 → サーフェス、またはフレネルによるゴースト表現	形状、テクスチャ、ストーリー、人間のスケール
組み立て部品	家具、機械、模型、モジュール式製品	高い位置からの3/4ビュー。全体がフレーム内に収まる	スクロールによる分解：各パーツが軸に沿って分離し、戻る	全体 → 分解 → パーツごと → 組み立て
大規模	家、建物、土地、船	より遠くからのカメラ。テーブル上の「模型」のような回転	フロアごとの垂直スイープ、断面切断	立地、フロアプラン、断面、素材

また、ビジュアルコンセプトもオブジェクトに応じて選択し、デフォルトのものを使わないでください。「設計図」は設計・製造されたものすべてに適しています。ワインには「ワイナリーカード」、彫刻には「美術館カタログ」、ガジェットには「ラボ」、ビンテージ品には「時代物カタログ」が適しているかもしれません。完全なメニューは references/art-direction.md にあり、代替エフェクト（分解、点群、切断、充填）は references/shaders.md にあります。

ワークフロー

以下のフェーズを順番に実行してください。コードを書き始める前に、フェーズ1と2の決定事項をユーザーと確認してください。これらは以降のすべてを変えるからです。

フェーズ1 — ブリーフとコンセプト（ユーザーと約5分）

以下を質問するか、推測してください。

• 対象のオブジェクトとその素材（革、ガラス、金属、マットプラスチック、布）。素材は、キャプチャ方法と照明方法を決定します。
• 5～8つのフェーズ（アクト）からなるストーリー。 各フェーズは1つのセクションと1つのオブジェクトのポーズに対応します。典型的な例：紹介 → 設計図/寸法 → 構造（パーツ） → 表示 → 数字 → 起源/歴史 → クロージング。
• ビジュアルコンセプト、つまりすべてを統一的に表現するメタファー。「ブループリント」をデフォルトでコピーしないでください。その製品に意味のあるメタファーを選択してください。references/art-direction.md には、コンセプトのメニュー（設計図、美術館カード、ラボ、90年代カタログ、ファッションエディトリアル、産業用分解図）と、そのパレット、フォント、および各コンセプトが3Dでどのように表現されるかが記載されています。
• 実際のコンテンツ。 データ、寸法、素材、歴史、クレジット。参考ウェブサイトは、元のカタログとスキャンの実際のデータを使用しているため、本物であると感じられます。データがない場合は依頼してください。実際の製品の仕様をでっち上げないでください。
• 言語（日本語/英語）とカラーバリエーションの有無。

フェーズ2 — 3Dモデルの入手

これは最終的な品質に最も影響を与えるフェーズです。以下の決定木を使用し、該当するリファレンスを読んでください。

ユーザーは物理的なオブジェクトを持っていますか？
├─ はい → スキャンする（references/3d-capture.md）
│   ├─ マット/テクスチャのあるオブジェクト（スニーカー、食品、石、木、布） → スマートフォンまたはカメラで写真測量
│   ├─ 光沢のある、黒い、または透明なオブジェクト → 一時的なマットスプレー + 写真測量、またはモデリング
│   └─ 非常に小さい/細かいオブジェクト（宝石、ケーブル） → マクロ写真測量またはモデリング
└─ いいえ → 代替手段（references/3d-alternatives.md）
    ├─ メーカーのCAD/STEPデータがある → 変換してテクスチャを適用
    ├─ 複数のアングルからの良い写真がある → AI画像-to-3D（Meshy、Tripo、Rodin、Hunyuan3D、TRELLIS）+ クレンジング
    ├─ 幾何学的形状（ボトル、缶、ランプ、家具） → Blenderでモデリング（回転/押し出し）、1〜4時間
    ├─ 汎用製品 → ライセンスを購入またはダウンロード（Fab、Sketchfab、CGTrader、Poly Haven）
    └─ モデルが不可能 → プロシージャル/スタイライズドオブジェクト（旋盤、SVGからの押し出し、点群、ラインアート）

どのような出自であっても、モデルは最適化パイプライン（references/asset-pipeline.md）を通過します。クレンジング、100～300kトライアングルへのデシメーション、2048～4096のWebPテクスチャ、Meshopt圧縮、実寸、正しい原点と向き、そしてワイヤーフレーム用に別途大幅にデシメートされたメッシュが必要です。このディテールは非常に重要です。密度の高いメッシュのワイヤーフレームは灰色のノイズのように見え、線画のようには見えません。

このステップ用のスクリプトが用意されています。scripts/prepare-model.sh <input.glb|.obj|.fbx> <name> です。最適化された models/<name>.glb と、ライン用の models/<name>-wire.glb を生成します。サンプルのストラトキャスターでは、22.2MBから1.8MBに削減されました。

スキャンまたは手作りモデルの場合。 デシメートされたワイヤーメッシュはスキャン用です。スキャンではエッジがノイズになるためです。手作りモデル（CAD、Sketchfab、Blender）の場合、デシメートされたメッシュは表面を横切る長い三角形になり、線画ではなくメッシュとして読み取られます。その場合は、メインメッシュに対して wireMode: 'edges' を使用し、wireModel: null と設定して、ワイヤーメッシュを生成しないでください。これは線画のように読み取られ、ファイルを1つ節約できます。

Sketchfabからのダウンロード：ログイン（無料アカウント）が必要です。統合ブラウザを使用する場合は、ユーザーにログインを依頼し、ダウンロード前に名前、サイズ、形式（GLB）を確認してください。オリジナルは別の source/ フォルダに保存し、フッターに作者（CC BY）のクレジットを記載してください。

フェーズ3 — テンプレートからプロジェクトをセットアップする

assets/template/ をプロジェクトフォルダにコピーします。これには以下のものが含まれます。

ファイル	機能
index.html	構造：固定背景（グリッド + 紙）、固定 <canvas>、オーバーレイ <svg>、ローダー、ナビ、進行状況バー、カラーバリエーションセレクター、およびポーズ属性（data-ry、data-x、data-reveal…）を持つセクション。
styles.css	ビジュアルシステム：トークン、clamp() による流動的なタイポグラフィ、CSSグリッド、紙の背景、ブラーによるリビール、イージングカーブ、モバイル対応。
main.js	エンジン：レンダラー、ライト、プログレス付きロード、リビールとカラーバリエーションのシェーダー、ワイヤーフレームとゴースト、シャドウ、スクロールコレオグラフィ、スプリングによるドラッグ、SVGオーバーレイ（寸法線とコールアウト）、カウンター、カラーバリエーション。ファイル先頭の CONFIG からすべて設定可能。

ビルドは不要です。任意の静的サーバー（npx serve、python -m http.server）で提供できます。ESモジュールのため file:// では動作しません。Three.jsは importmap に固定バージョンでjsDelivrから読み込まれます。本番用には、vendor/ にコピーして modulepreload を追加することをお勧めします（references/performance.md 参照）。

モデルなしでテスト：index.html?model=<url of a .glb> またはパラメータなしで、代替のプロシージャルオブジェクトを表示します。テストに適したGLBは、KhronosGroup/glTF-Sample-Assets の MaterialsVariantsShoe.glb です。

フェーズ4 — シーンにモデルを適合させる

main.js → CONFIG で以下の設定を行います。

1. orient：Y軸が上を向き、長さがX軸に沿うように回転させます（例えば、立っているギターを寝かせるには [0, 0, -Math.PI/2]）。向きはモデルの測定前に適用されるため、バウンディングボックス、寸法線、sweepDir、コールアウト、分解は常に既に向きが設定された空間で表現されます。軸を確認するには ?debug を使用します。
2. realSizeCm：最も長い辺の実際の長さ（cm単位）。ここからすべての表示寸法が計算されます。
3. sweepDir：リビールスイープの方向。オブジェクトの自然な「読み取り」方向に従うようにします。細長いオブジェクトでは長手方向（[1,0,0] または [0,0,1]）、ボトルや建物では下から上（[0,1,0]）、コンパクトなオブジェクトでは斜め方向（[0.3,0.3,1]）。
4. callouts：パーツの位置。バウンディングボックスの割合（f、0..1）またはモデルの正確な座標（p、モデルの単位）。コードは最も近い頂点にピン留めします。線が交差しないように、上から下の順に並べてください。?debug を使用すると、モデル上をクリックしたときに、その点の正確な割合がコンソールに出力されます。
5. colorways：バリアントごとにダーク/ライトを定義します（バリアントがない場合はセレクターを削除します）。シェーダーは輝度で再配色し、彩度の高いディテールを保持します。オブジェクト自体が彩度の高い色の場合は、keepSaturated: 0 を設定します。
6. セクション：<section> は自由に追加、削除、並べ替えできます。エンジンは任意の数のセクションから任意の順序でポーズを読み取ります。
7. 特殊なケースのためのエンジンオプション：
   • procedural: () => Object3D：glbをロードする代わりに、コードでオブジェクトを構築します。
   • wireMode: 'edges'：線画のエッジのみを描画します。ハードサーフェスモデル、CAD、プロシージャルモデルに最適です。
   • extraKeys: ['screen'] + onFrame(cur, dt, t)：セクションで制御する独自のエフェクト（data-screen）に使用します。例えば、点灯する画面、ライト、開く蓋などです。
   • data-explode による分解：各パーツは userData.explode = [x,y,z] に従って移動します（設定がない場合は中心から遠ざかります）。
   • パーツごと：userData.noRecolor（カラーバリエーションを無視）、userData.noWire（設計図に表示しない）、userData.keepPbr（エンジンがマテリアルを変更しない）。
   • recolorOnly: ['BodyMaterial']：指定されたマテリアル（glb内の名前）のみがカラーバリエーションの影響を受けます。ギターの場合、ボディに塗装され、ピックガード、ネック、金具はそのまま残ります。
   • keepPbr: true：手作りモデルのPBRを尊重します（本物の金属、クリアコート付きワニス）。デフォルトでは、エンジンはスキャンやAIの偽のメタルネスを修正しますが、これは適切に作られたモデルを台無しにします。
   • wireColors: [paper 0 の色, paper 1 の色] と edgeColor：設計図を任意のコンセプトに適合させます。例えば、青地に白ではなく、特許紙にインクなど。背景の2つの状態（backdrop__grid と backdrop__paper）は単なる名前です。シート→ステージ、ショーウィンドウ→夜など、スタイルを設定できます。
   • data-rz（ロール）：ギターをスタンドに立てかけるなど、長いオブジェクトを立てるために使用します。立てるとフロアシャドウは自動的にオフになります。
8. **

...（翻訳のため省略されました）