Three.jsで異なるマップにUVチャンネルを指定する方法

Question

異なるマップ（テクスチャ）に使用するUVのセットを指定することはできますか？

各テクスチャに使用するUVを指定できますか？

Answer 1

現在のリビジョンthree.js（r78）には、標準マテリアルのUVチャネルを指定するためのインタフェースはありません。 Lambert/Phong/Standard素材は、lightMapとaoMapに2番目のチャンネル（uv2）を使用します。しかし、標準的な材料からカスタムuvチャンネルを使って独自の材料を作ることは可能です。

1. があなたの頂点とフラグメントシェーダを作成します。

   このような材料は、このように構成することができます。標準のthree.jsマテリアルは、コードで置き換えられるチャンク（Cスタイルのプリプロセッサ#includeディレクティブ）を使用して作成されます。たとえば、three.js standard shadersには、MeshPhongMaterial vertexとfragmentシェーダがあります。フラグメントシェーダの行は#include <lights_template>です。対応ファイルlights_template.glslはchunks directoryにあります。

   #ifdef USE_LIGHTMAP 
       vec3 lightMapIrradiance = texture2D(lightMap, vUv2).xyz * lightMapIntensity; 
       // more code here 
   #endif 
   

   COORDSは、ライトマップのために使用されるものに影響を与えると、このテクスチャルックアップでvUv2を変更する：このファイルは、次のコードが含まれています。追加のUVセットが必要な場合は、vUvとvUv2のようにバリエーションとして頂点シェーダーに渡すことができます。 オリジナルのthree.jsシェーダをソースコードにコピーして貼り付けることで、目的のシェーダを得ることができます。

2. ユニフォームオブジェクトを作成します。このためにはTHREE.UniformsLibが役に立ちます。また、THREE.UniformsUtils.clone()を介して既存の素材から均一にすることもできます。

3. 頂点とフラグメントシェーダの前にある材料に必要な定義を追加します（fragmentShader = '#define USE_LIGHTMAP\n' + fragmentShader;）。

4. THREE.RawShaderMaterialを使用して品目を登録します。あらかじめ定義していないTHREE.ShaderMaterialも正しく動作するはずです。

また、単純なマテリアルが必要な場合は、チャンクを無視して、最初から目的のシェーダを書き込む方が速い場合があります。