使い方ガイドへスキップ
Three.js Materials作者 CloudAI-X

Three.js Materials スキル。

サーフェスに合うシェーディングモデルを選び、想定する照明の下で確認します。

  • 3D
  • Three.js
ソースレビュー · Three.js MaterialsSKILL.md
タスク 3D 成果物 • 根拠のあるマテリアルの選択 • マップと物理プロパティの割り当て • 透明度とリソースのレビュー 始める前に 動作する Three.js プロジェクトとレンダラーが必要です。ソース内の例は、インストール済みのリリースで確認してください。追加のコントロールやローダーは、選んだ方法によって必要になります。
編集者による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

Three.js Materials:サーフェスの挙動を選ぶ

マテリアルモデル、PBR プロパティ、高度なサーフェス、透明度、リソース管理のパターンを扱います。

ソースに基づくワークフロー実行ベンチマークではありません

進め方

Three.js Materialsは、アンリット、ライティング対応、物理ベース、トゥーン、デバッグ用、カスタムシェーダーのマテリアルを比較します。色は選択基準の一部にすぎません。モデルごとに、ライト、マップ、物理プロパティがメッシュに与える影響が変わります。

スタンダードおよび物理マテリアルの各セクションでは、roughness、metalness、clearcoat、transmission、sheen、iridescence を扱います。透明度、深度の挙動、クローン、破棄も含まれます。これらはサーフェス制作のパターンであり、任意のパラメータの組み合わせがリアルに見えることを保証するものではありません。

期待される成果物

  • 根拠のあるマテリアルの選択
  • マップと物理プロパティの割り当て
  • 透明度とリソースのレビュー
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    仕上がりを見極める

    サーフェスにフラットな色、マットなライト応答、様式化、高度な物理的挙動のどれが必要かを決めます。

  2. 02
    対応プロパティを割り当てる

    シーンの照明を確認しながら、関連するマップとプロパティを使います。

  3. 03
    トレードオフを確認する

    透明度、深度の挙動、シェーダーのコスト、マテリアルの再利用を見直します。

02 利用場面

使う場面

動作する Three.js プロジェクトとレンダラーが必要です。ソース内の例は、インストール済みのリリースで確認してください。追加のコントロールやローダーは、選んだ方法によって必要になります。

向いているケース

  • サーフェス検討コーティング、布のような質感、金属、透過の仕上げを比較できます。
  • レンダリングの診断ノーマルや深度のマテリアルは、ジオメトリの問題と見た目の問題を切り分ける助けになります。

確認すべき制限

  • 照明が必要です物理マテリアル自体は環境ライティングを提供しません。
  • リリース固有の詳細マップのチャンネルやシェーダーフックは、実際に使う Three.js のバージョンで確認が必要です。

用意する入力

  • 仕上がりの参考目指すサーフェスと重要な特徴を伝えてください。
  • テクスチャ素材利用できるカラーマップとデータマップを示してください。
  • シーンの状況ライト、環境、レンダラー、デバイスの制約を共有してください。

03 重要な判断

重要な判断

  1. 予算に関する判断

    よりシンプルなシェーディングと高度な物理エフェクトでは、コストが異なります。

  2. 透明度は単一の設定ではありません

    opacity、transmission、深度書き込み、ソートは、それぞれ別に検討する必要があります。

04 依頼例

焦点を絞ったブリーフで試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

関連する threejs-skills ディレクトリを、エージェント向けのガイダンスとして使います。Three.js のランタイムではなく、シーンのアセットもインストールされません。

アップストリームのソースファイル
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-materials/SKILL.md

動作する Three.js プロジェクトとレンダラーが必要です。ソース内の例は、インストール済みのリリースで確認してください。追加のコントロールやローダーは、選んだ方法によって必要になります。

まず一つの成果物から

スキルを実行する前に、このブリーフの範囲、元資料、制約を調整してください。

サンプルブリーフ
threejs-materialsを使って、マットなポリマー製ボディと透明な保護カバーを比較してください。それぞれに最もシンプルで適切なマテリアルを選び、使用するマップを挙げ、transmission と opacity の違いを説明してください。設定を推奨する前に、両方を同じ照明の下で確認してください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認します。

  • マテリアルが必要な機能に対応している。
  • マップの役割が明確である。
  • 透明度とコストが文脈の中で確認されている。

OpenDesignは、コーディングエージェント向けのローカルなデザインワークスペースを提供します。この掲載は、スキルが同梱されていることや、外部ツール、認証情報、ソフトウェア依存が含まれることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更されることがあります。

ソースの所有者
CloudAI-X
ライセンス
未確認 — 再利用する前にアップストリームの利用条件を確認してください。
確認済みスナップショット
2026-10-07 · b1c623076c66
編集者によるソース要約
マテリアルモデル、PBR プロパティ、高度なサーフェス、透明度、リソース管理のパターンを扱います。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の目安であり、スキルの利用状況や品質評価ではありません。

06 開始前の質問

始める前の質問

すべてのマテリアルがライトに反応しますか?

いいえ。MeshBasicMaterial はアンリットとして紹介されています。

物理マテリアルはどんなときに役立ちますか?

ソースでは、clearcoat、transmission、sheen などの高度なエフェクトに使われています。

マテリアルを再利用すると、ドローコールは自動的にまとまりますか?

そう想定しないでください。リソースの再利用と実際のドローの挙動は、別途プロファイリングが必要です。

OpenDesign

次のデザインイテレーションの余地をつくる。

ブリーフ、元資料、デザイン作業をローカルのワークスペースにまとめて保管できます。ワークフローに加える前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-materials/SKILL.md