materials

マテリアルとテクスチャ

color だけを設定した MeshStandardMaterial は、平坦でプラスチックのような「テクスチャのないグレー」に見えます。これはシーンが未完成だとすぐに分かる特徴です。完成した表面にはテクスチャマップがあります。単色のままの表面は、マテリアルではなくフィットギャップです。

テクスチャセットを適用する

マーケットの texture アセットには PBR セット（ベースカラー＋ノーマル＋ラフネス／メタルネス／AO）が含まれています。マップをまとめて読み込み、割り当てます。

const loader = new TextureLoader()
const base = loader.load('/texture/grass/basecolor.jpg')
base.colorSpace = SRGBColorSpace                          // base color is sRGB
const normal = loader.load('/texture/grass/normal.jpg')  // every other map is linear (leave default)
const rough = loader.load('/texture/grass/roughness.jpg')

const material = new MeshStandardMaterial({ map: base, normalMap: normal, roughnessMap: rough })

カラースペース — 最もよくある間違い

• ベースカラーマップとエミッシブマップ → SRGBColorSpace。 これを忘れると、全体が色あせて灰色がかって見えます。
• ノーマル／ラフネス／メタルネス／AO マップはリニアのままにします（デフォルトの設定です。sRGB として指定しないでください）。

現在の Three.js では、aoMap はデフォルトでプライマリの uv セットを共有します。2 つ目の uv2 属性を作成する必要はありません（この要件は古いバージョンのものです）。

大きな表面へのタイリング

地面や壁では、メッシュ全体にテクスチャを 1 枚引き伸ばすのではなく、テクスチャを繰り返す必要があります。

for (const t of [base, normal, rough]) {
  t.wrapS = t.wrapT = RepeatWrapping
  t.repeat.set(surfaceMeters / tileMeters, surfaceMeters / tileMeters) // ~1 tile per few meters
}

各表面に合ったテクスチャを選びます。地形には草や地面、崖には石、床や壁には板材や金属を使います。アセット調査からテクスチャを選びます。表面に合うものがなければ、単色で出荷するのではなく、その不足を明記してください。