mcpField
T
threejs-scenes

threejs-scenes

github.com/full-stack-skills開発10384 回インストール4 週間前に更新
リポジトリ

threejs-scenes について

three.js 開発者向けに、Scene、フォグ、背景設定を扱うシーン API のスキルです。フォグとカメラの far 平面の関係を説明し、HDR やテクスチャなどの関連資料を案内します。

主な機能

  1. 01Scene と背景の設定
  2. 02線形フォグと指数フォグの区別
  3. 03フォグ距離とカメラ far 平面の調整
  4. 04背景、環境、レンダラー設定の関係の説明
  5. 05HDR、ローダー、テクスチャ資料の案内

活用シーン

  1. 01three.js シーンの背景設定
  2. 02シーンの規模に合わせたフォグ調整
  3. 03フォグとカメラのクリッピング問題の調査
  4. 04フォグ設定から HDR 環境設定への移行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-scenes

インストール後、Claude Code で/threejs-scenesを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yamlexamples/workflow-fog-background.md

詳細

このスキルを使用するタイミング

ユーザーが次の内容に言及した場合は、必ずこのスキルを使用してください。

  • Scene をルートにする構成、scene.background、シーンレベルでの環境またはスカイボールの設定
  • Fog または FogExp2 のパラメーター（near、far、color、密度）と、カメラの far 平面との相互作用
  • レンダーリストを概念的に整理すること（シーンの子要素）

重要：シーンとテクスチャとローダーの違い

対象スキル
Scene + fog APIthreejs-scenes
テクスチャのサンプリング、PMREM ジェネレーターの使用threejs-textures
HDR/glTF の取得threejs-loaders

トリガーとなる語句の例：

  • 「Scene」、「Fog」、「FogExp2」、「background」、「霧」
  • 「シーンルートノード」、「線形フォグ」、「指数フォグ」

このスキルの使用方法

  1. Scene をインスタンス化し、グラフのルールに従ってライト／メッシュ／カメラを子要素として追加します（threejs-objects）。
  2. 屋外や地平線の雰囲気に合わせて、線形の Fog と指数関数的な FogExp2 のどちらかを選びます。
  3. クリッピングのアーティファクトを避けるため、カメラの far と併せてフォグの near／far を調整します。
  4. ドキュメントに従って scene.background に Color、Texture、またはキューブマップを設定します。環境ライティングには、対応するレンダラー／マテリアルの設定も必要です。
  5. ユーザーが HDR ファイルを使った IBL を求めている場合は、ローダー → テクスチャ → マテリアルのパイプラインを明示的に案内します。
  6. パフォーマンス向上のためのフラスタムカリングを、フォグで代替できないことを説明します。

examples/workflow-fog-background.md を参照してください。

ドキュメントの一覧（公式）

ドキュメントのセクション代表的なリンク
シーンhttps://threejs.org/docs/#Scenes
シーンhttps://threejs.org/docs/Scene.html
Foghttps://threejs.org/docs/Fog.html
FogExp2https://threejs.org/docs/FogExp2.html

対象範囲

  • 対象範囲内： API レベルでの Scene、フォグの種類、background フィールドの意味。
  • 対象範囲外： HDR／glTF ファイルの取得（threejs-loaders）；PMREM とテクスチャのサンプリング（threejs-textures）；トーンマッピング／出力色空間のデフォルト（threejs-renderers）；シーンの Fog と関連付ける場合を除く、全画面フォグ専用のポストプロセススタック（threejs-postprocessing）；コアのフォグ API を超えるカスタム大気散乱シェーダー。

よくある落とし穴とベストプラクティス

  • 地平線の継ぎ目を目立たなくするには、フォグの色を背景と調和させます。
  • フォグを使っていても、カメラの far が非常に大きい場合は、シーンのスケールとの整合性が必要です。
  • background の回転／強度に関する機能はレンダラーのバージョンに依存するため、最新のドキュメントを参照してください。

ドキュメントとバージョン

Scene、Fog、background フィールドは、three.js docs の Scenes に記載されています。環境に関するビジュアル表現では、多くの場合、このスキルと threejs-textures（PMREM）および threejs-loaders（HDR ファイル）を組み合わせます。ユーザーの関心が「フォグの色」から「HDR スカイ」に移ったら、該当ページへのリンクを案内してください。

エージェントの回答チェックリスト

このスキルに基づいて回答する際は、次の点を優先してください。

  1. Scene、Fog、または FogExp2 の公式ページにリンクします。
  2. フォグの距離を threejs-camera の far 平面およびワールドスケールに関連付けて説明します。
  3. PMREM／HDR ファイルの手順は、threejs-textures／threejs-loaders に委ね、それぞれ一文で説明します。
  4. 色管理のチュートリアル全体を重複して説明せず、レンダラーとテクスチャのスキルを参照するよう案内します。

参考資料

キーワード

英語： scene、fog、fogexp2、background、environment、three.js

中国語： シーン、霧、Fog、背景、環境、three.js

コメント

Markdown 対応