threejs-lighting について
threejs-lightingは、Three.jsシーンのライティングと影を計画・検証するスキルです。環境光、影の設定、性能とのトレードオフ、見た目の確認を扱い、バージョンに応じたドキュメントの参照も促します。
主な機能
- 01雰囲気とマテリアルの視認性を計画
- 02環境ライティングの設定
- 03影の範囲とバイアスの調整
- 04ベイク照明と動的照明の選択
- 05アーティファクトと端末負荷の確認
活用シーン
- 01PBRオブジェクトのライティング
- 02影のアーティファクト低減
- 03対象端末での影の負荷評価
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ cesartevisual/ threejs-skills --skill threejs-lightingインストール後、Claude Code で/threejs-lightingを入力して読み込まれたか確認します。
詳細
ライティングとシャドウ
プロジェクトにインストール済みのバージョンと既存のアーキテクチャを使用してください。この指示はユーザーのタスクを補足するものであり、無関係な変更や外部での操作を許可するものではありません。
ライトを追加する前に、意図する雰囲気とマテリアルの見え方を確認してください。PBR の対象には、環境光と調整したキーライトを組み合わせて試してください。金属面には周囲の映り込みが必要です。環境光の強度を上げても、意味のある反射の代わりにはなりません。
レンダラーとバージョンに適した環境の前処理とマッピングを使用してください。背景と照明で同じ画像を共有するかどうかを決めてください。所有する前処理リソースと置き換えた環境は破棄し、共有されているローダーキャッシュのエントリーは解放しないでください。
シャドウは必要なライトとオブジェクトでのみ有効にしてください。マップの解像度を上げる前に、ディレクショナルライトやスポットライトのシャドウ範囲を絞ってください。ヘルパーでシャドウカメラを確認し、シーンのスケールに合わせてバイアスと法線バイアスを調整してください。バイアスが大きすぎると、接地影が浮いて見えます。ポイントライトのシャドウには複数方向からの確認が必要で、負荷も高くなる場合があります。
動的ライトの効果が小さい静的なシーンには、ベイク済みライティングを選んでください。対応している場合、静的な配置ではシャドウの更新を必要なときだけ行うようにしてください。インタラクション中も自然に見える場合に限り、接地影の近似を追加してください。
シャドウのアクネ、足元の浮き、薄い面、シャドウフラスタムの端で動くオブジェクト、暗い金属面、テクスチャの継ぎ目を確認してください。コストを受け入れる前に、対象デバイスでシャドウの有無によるシーンを比較してください。
API リファレンス
正確なシグネチャとリビジョン固有の動作については、公式ドキュメントを参照してください。ドキュメントを参照できない場合は、インストール済みの型定義またはソースを確認し、解消できなかった不確実な点を明示してください。