tsogjavklann/awwwards-3d

Awwwards スタイル 3D ウェブサイト

あなたは、Active Theory、Lusion、14islands、Bonhomme、Resn、Studio Freight、Locomotive、Igloo Inc. の流れを汲む、スクロール駆動で映画的な 3D ウェブ体験を構築しています。美観の目標はプレミアムで、ゆっくりと、lerp され、光沢があり、雰囲気があることです。決してスナップせず、忙しすぎず、デフォルトのままでもありません。

核となる哲学

コードに触れる前にこれを読んでください。これが「Three.js デモ」と「Awwwards Site of the Day」の違いです。

1. 美学 > ジオメトリ。 良い HDRI、ACESFilmic トーンマッピング、ブルームを備えた 6 ポリゴンの立方体は、1 つの DirectionalLight で照らされた 20 万ポリゴンのモデルよりも見栄えがします。予算はジオメトリではなく、まずライティングとポストプロセッシングに費やしましょう。
2. すべてを Lerp する。 値が瞬時に変化してはいけません。カメラの位置、回転、スクロール進行度、マウスの位置、さらにはレイキャスターのターゲットもすべて、減衰係数（0.06～0.1 が最適）を通して実行します。何もスナップしないので、世界が生き生きと感じられます。
3. 可能な限り単一ファイルの HTML。 デフォルトの成果物は、unpkg から ESM インポートを使用した 1 つの .html ファイルです（GSAP には esm.sh も使用）。ユーザーが明示的に要求しない限り、ビルドステップは不要です。これにより、作業がポータブルで、レビュー可能で、共有可能になります。
4. モバイルファースト、常にパフォーマンス。 pixelRatio を Math.min(devicePixelRatio, 2) に制限します。視錐台カリングを行います。モバイルではポストプロセッシングを半分にします。完了宣言の前に、Chrome DevTools でミッドレンジの Android でテストしてください。
5. ACESFilmic トーンマッピングは譲れません。 renderer.toneMapping = THREE.ACESFilmicToneMapping および renderer.outputColorSpace = THREE.SRGBColorSpace を設定します。これがないと、すべてが平坦で「WebGL っぽく」見えます。
6. metalness > 0 には環境マップが必要です。 envMap のない金属マテリアルは黒い塊です。金属やガラスを導入する前に、必ず HDRI をロードするか（あるいはフォールバックとして RoomEnvironment を使用）してください。
7. デスクトップでは 60fps、モバイルでは最低 30fps。 達成できない場合は、ジオメトリを減らす前にポストプロセッシングパスを削減してください。目は三角形よりもノイズに気づきます。

固定テクノロジースタック

これらのバージョンは一緒にテストされています。確認せずにアップグレードしないでください。

three                       0.170.0
gsap                        3.12.5  (with ScrollTrigger)
lenis                       1.1.0   (@studio-freight/lenis ではありません — そのスコープは廃止されました)

ポストプロセッシングには、three ビルトインの EffectComposer を three/addons/postprocessing/ から使用します。スタンドアロンの postprocessing ライブラリ（v6.36.0）は評価され、このスキルからドロップされました。その内部が Material.onBeforeRender() を呼び出すため、three r170 で削除され、マテリアルごとにフレームごとにコンソール警告が生成されます。three ビルトインパス（UnrealBloomPass、OutputPass、ShaderPass、LUTPass など）は、バージョンドリフトゼロで必要なすべてのエフェクトをカバーします。

ガラスには、transmission: 1.0 + dispersion: 1.2（r166+ の機能 — 外部ライブラリなしでの色収差屈折）を備えた three ビルトインの MeshPhysicalMaterial を使用します。drei-vanilla の MeshTransmissionMaterial は three コア/アドオンには含まれていません。時間的歪みやオブジェクトごとのバッファサンプリングが必要な場合にのみ使用してください（その場合はインポートマップに drei-vanilla と [email protected] を追加します）。両方のパスについては PATTERNS.md #5 を参照してください。

CDN インポートには、次のインポートマップパターンを使用します（標準的な例は assets/templates/minimal.html を参照）：

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/[email protected]/build/three.module.js",
    "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
    "gsap": "https://esm.sh/[email protected]",
    "gsap/ScrollTrigger": "https://esm.sh/[email protected]/ScrollTrigger",
    "lenis": "https://unpkg.com/[email protected]/dist/lenis.mjs"
  }
}
</script>

Composer の選択 — 確定: このスキルは、three/addons/postprocessing/ からの three ビルトインの EffectComposer を使用します。スタンドアロンの postprocessing npm ライブラリはテストされ、却下されました。[email protected] は r170 で削除された Material.onBeforeRender() にフラグを立て、マテリアルごとにフレームごとにコンソールをあふれさせます。three ビルトインパスは、このスキルに必要なすべてのエフェクト（ブルーム、ShaderPass によるビネット、ShaderPass によるグレイン、LUTPass による LUT、OutputPass による出力トーンマッピング）をカバーします。標準的なパスチェーンについては references/POST_PROCESSING.md を参照してください。

CDN の信頼性: three と lenis にはデフォルトで unpkg.com を使用してください。これは npm ディレクトリ構造を正確にミラーリングしているため、three/addons/... がクリーンに解決されます。cdn.jsdelivr.net はテストされましたが、一部のネットワークから [email protected]/examples/jsm/postprocessing/* ファイルを提供する際に断続的に失敗しました（ERR_CONNECTION_CLOSED）。GSAP には esm.sh を使用してください。これは GSAP UMD バンドルに対する最もクリーンな ESM ゲートウェイだからです。unpkg に到達できない場合のフォールバック順序: unpkg → esm.sh → cdn.skypack.dev。本番環境では、ファイルをローカルにベンダリングしてください（/vendor/ にダウンロード）。厳格な CDN 依存はプロトタイプにのみ許容されます。

更新ポリシー: バージョンは一緒にテストされているためロックされています。アップグレードするには：(1) 最初に assets/templates/minimal.html でバンプする、(2) ブラウザで 4 つのテンプレートすべてを実行する、(3) 壊れている箇所を修正する、(4) SKILL.md と PATTERNS.md を更新する。単一のテンプレートで静かにバンプしないでください。テンプレート間のドリフトは「自分のマシンでは動く」の最大の原因です。

5 ステップのワークフロー

この順序に従ってください。ステップをスキップすると、「テックデモ」の出力になり、「プレミアムサイト」の出力にはなりません。

ステップ 1 — 体験アーキタイプを特定する

すべての Awwwards 3D サイトはこれらのいずれかに当てはまります。1 つ選んでコミットしてください：

アーキタイプ	パターン	参考例
オブジェクトショーケース	単一のヒーローオブジェクト、スクロールに応じてカメラが周回/ズーム	Bonhomme 製品ページ、Apple AirPods Pro
ルームウォークスルー	3D 内部を通るカメラパス	Igloo Inc.、Bruno Simon ポートフォリオ
トンネル	無限のジオメトリを通ってカメラが前方に飛ぶ	Active Theory 実験
垂直降下	スクロール = レイヤーを通る落下/上昇	14islands ケーススタディ
フライオーバー	カメラがランドスケープを横断する	Lusion ケーススタディ
パーティクルフィールド	スクロール/マウスに反応する数千のポイント	Resn 実験

ユーザーが指定していない場合は、どのアーキタイプかを尋ねてください。新しいものを発明しないでください。これらは実証済みです。

ステップ 2 — アセットを計画する

基準を満たす最も安価なソースを選択してください：

1. Three.js プリミティブ (SphereGeometry、BoxGeometry、TorusKnotGeometry) — 抽象/ショーケース作業向け。ほとんどの Awwwards サイトはこれらを使用します。見落とさないでください。
2. Blender via MCP — カスタムシェイプが必要な場合。references/BLENDER_PIPELINE.md にレシピ（コイン、ガラスの球、ブロブ、ローポリルーム）と GLB エクスポート設定（Draco + KTX2）があります。
3. Polyhaven — HDRI とテクスチャ、無料、CC0。モデルよりも HDRI の方が重要です。
4. Sketchfab — 既製モデルの最後の手段。常にポリゴン数をチェックしてください。

ステップ 3 — テンプレートを選ぶ

assets/templates/ から開始してください：

• minimal.html — HDRI、トーンマッピング、Lenis、ポストプロセッシングが配線された空のシーン。カスタムのものすべての基盤として使用します。
• coin-scroll.html — スクロールに応じてコインが回転し落下します（オブジェクトショーケース）。
• room-walkthrough.html — 部屋を通るスプラインに沿ってカメラが移動します（ルームウォークスルー）。
• glass-product.html — MeshPhysicalMaterial の transmission + dispersion（r166+）、HDRI、ソフトブルームを使用した単一製品（オブジェクトショーケース、ガラス）。

テンプレートは開始点であり、最終的な作品ではありません。不要なものを削除し、必要なものをレイヤーで追加してください。

ステップ 4 — ポリッシュをレイヤー化する（この順序で）

順序が重要です。各レイヤーは前のレイヤーが配置されていることを前提としています。

1. HDRI がロードされ、scene.environment として適用されている
2. トーンマッピング — ACESFilmicToneMapping、露出 1.0–1.2
3. ライティング — HDRI があっても、シャドウの方向を決めるために 1 つの DirectionalLight を追加する
4. ポストプロセッシング — HDR ターゲット → RenderPass → UnrealBloomPass（強度 ~0.45、半径 0.4、しきい値 0.82）→ ビネット ShaderPass → OutputPass（renderer.toneMapping = ACESFilmic を適用）→ 最後にグレイン ShaderPass を使用した three ビルトイン EffectComposer
5. Lenis スムーススクロールが GSAP ScrollTrigger.update に配線されている
6. カスタムカーソル（オプションですが、Bonhomme/Lusion のトレードマーク）
7. スクロールタイムライン — ScrollTrigger によって駆動される GSAP タイムラインで、カメラ/オブジェクトのプロパティを lerp する
8. フィルムグレイン を最終のコンポジットレイヤーとして — 時間駆動のノイズフラグメント、強度 ~0.05 のカスタム ShaderPass（references/POST_PROCESSING.md §「パス 5 — フィルムグレイン」を参照）

ステップ 5 — パフォーマンス監査

完了を宣言する前に：

• Lighthouse パフォーマンス デスクトップ ≥ 85、モバイル ≥ 70
• FCP < 1.8s、LCP < 2.5s
• デスクトップで 60fps、ミッドレンジ Android で最低 30fps
• pixelRatio が 2 に制限されている
• GLB ファイルが Draco 圧縮され、可能な限りテクスチャが KTX2 である
• requestAnimationFrame ループ内に console.log がない（DevTools でパフォーマンスが低下する）
• すべてのアニメーションがフレーム数ではなく delta 時間で駆動されている

厳格なルール — 絶対にしてはいけないこと

これらは壊れた成果物を生み出します。詳細は references/ANTI_PATTERNS.md を参照してください。

1. スナップアニメーション禁止。 すべてのプロパティ変更は、lerp または GSAP ease を介して行われます。
2. 環境マップなしでの metalness > 0 禁止。 結果：黒い塊。
3. キャップされていない pixelRatio 禁止。 devicePixelRatio = 2 の 4K モニターは 15fps に低下します。
4. 非圧縮 GLB 禁止。 Draco 圧縮は必須です（BLENDER_PIPELINE.md を参照）。
5. 自動再生オーディオ禁止。 ブラウザはブロックし、ユーザーは嫌います。
6. アニメーションループ内の console.log 禁止。 1 フレームに 1 つでも DevTools を破壊します。
7. CSS 駆動スクロールと JS 駆動スクロールの混在禁止。 Lenis がスクロールを所有します。ScrollTrigger は Lenis から読み取ります。CSS の scroll-behavior: smooth は削除する必要があります。
8. 本番環境での OrbitControls 禁止。 プロトタイピング用です。実際のサイトはスクロール駆動のカメラを使用します。
9. 精度宣言なしの ShaderMaterial 禁止。 モバイル GPU は precision mediump float; を必要とします。
10. 毎フレームシーン全体に対するレイキャスティング禁止。 インタラクティブなメッシュの小さな配列にフィルターします。
11. フレーム数ベースのアニメーション禁止。 すべてのモーションは、clock.getDelta() からの delta によって駆動され、それによって乗算される必要があります。144Hz モニターと 30Hz モニターは、視覚的に同一のモーションを生成する必要があります。lerp には、生の ease の代わりにフレームレートに依存しない式を使用します：factor = 1 - Math.pow(1 - ease, delta * 60)。

リファレンスファイル

必要に応じてロードしてください。開始時にすべてを読まないでください。

• references/ARCHITECTURE.md — シーン構造、lerp/スクロールループ、レンダリング順序
• references/PATTERNS.md — 一般的なニーズのための 33 のコピーペーストコードスニペット
• references/PROCEDURAL_GEOMETRY.md — コードのみのジオメトリ生成；プリミティブ、数式駆動シェイプ、頂点変位、ハイブリッド Blender パターン。AI 3D ジェネレーターに手を伸ばす前のデフォルトパス。
• references/BLENDER_PIPELINE.md — Blender MCP レシピ + GLB エクスポート設定
• references/SHADERS.md — GLSL ビルディングブロック（ノイズ、フレネル、分散、カスタムマテリアル）
• references/POST_PROCESSING.md — ブルーム、被写界深度、グレイン、色収差のレシピ
• references/TRANSITIONS.md — Barba.js ページトランジション、View Transitions API
• references/ANTI_PATTERNS.md — 美観を損なうものとその理由の詳細リスト

インスピレーションアーカイブ

ユーザーが方向性を決めかねている場合は、ここを参照するように促してください。ブラウザで開いてください。スクリーンショットやスクレイピングは行わないでください。

• Active Theory — https://activetheory.net — WebGL の華やかさ、GLSL の歪み、手作りのブルームと分散の達人
• Lusion — https://lusion.co — シュールな製品ショーケース、透過マテリアル、完璧なカラーグレーディング
• 14islands — https://14islands.com — 遊び心のある 3D、特徴的なページトランジション、シーン上のセンスの良いタイポグラフィ
• Bonhomme — https://bonhomme.lol — 大胆なタイポグラフィと 3D の融合、特徴的なカーソル、アートディレクション主導
• Resn — https://resn.co.nz — 雰囲気のあるパーティクルワーク、夢のようなパレット、ゆっくりとしたカメラ移動
• Studio Freight — https://studiofreight.com — Lenis の作者；ミニマリズムと完璧に調整されたスムーズさ
• Locomotive — https://locomotive.ca — オリジナルの Locomotive Scroll の作者；スクロールの振り付けの達人
• Igloo Inc. — https://igloo.inc — ランドスケープフライオーバー、ナラティブなペース配分、Pixar レベルのライティング
• Awwwards Sites of the Day — https://www.awwwards.com/websites/sites_of_the_day/ — 最新トレンドのための毎日厳選されたアーカイブ

オーディオ（オプションですが特徴的）

Awwwards 3D 受賞作品の約 70% は、微妙なオーディオ（アンビエントドローン、ホバー時のクリック音、スクロール時のシューッという音）を含んでいます。うまく使えば、オーディオは「サイト」と「体験」の違いになります。下手に使えば、ユーザーが最初の 2 秒でタブを閉じる理由になります。

ルール：

• Howler.js（https://esm.sh/[email protected]）または Web Audio API を使用してください。アンビエントには <audio> タグは使用しないでください。
• 常にユーザージェスチャー（ボタンクリック、最初のビューポートを過ぎたスクロールインビュー）の後ろに再生をゲートしてください。ブラウザは自動再生をブロックしますが、UX ルールはより厳格です。ユーザーが求めていない音を決して開始しないでください。
• UI の隅に永続的なミュートトグルを提供してください。デフォルト：モバイルでは OFF、初回訪問時は OFF（localStorage を使用してユーザーの選択を記憶します）。
• アンビエントは -18 dB から -24 dB でループしてください。UI サウンドは...

**[翻訳中に切り詰められました]