three.js - Three.js中如何为不同贴图指定UV channel

Question

是否可以指定哪一组 UV 应该用于不同的贴图(纹理)？

您能指定每个纹理应该使用哪些 UV 吗？

Answer 1

当前版本的 three.js (r78) 中没有为标准 Material 指定 UV channel 的接口(interface)。 Lambert/Phong/Standard Material 使用第二个 channel (uv2) 进行 lightMap 和 aoMap。然而，您可以使用标准 Material 的自定义 uv channel 制作您自己的 Material 。

这样的 Material 可以这样构造:

1. 制作顶点和片段着色器。标准的 three.js Material 是使用 block (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
   

   改变 vUv2在此纹理查找中，影响哪些坐标将用于光照贴图。如果您需要额外的 uv 集，您可以像 vUv 和 vUv2 一样通过顶点着色器传递它们。通过这种方式，可以通过将原始 three.js 着色器复制粘贴到您的源代码中并进行一些编辑来获得所需的着色器。

2. 让你反对制服。为此 THREE.UniformsLib可能会有帮助。您也可以通过 THREE.UniformsUtils.clone() 从现有 Material 中获得制服。 .

3. 在顶点和片段着色器 (fragmentShader = '#define USE_LIGHTMAP\n' + fragmentShader;) 之前添加定义您需要的 Material 。

4. 使用 THREE.RawShaderMaterial 创建您的 Material . THREE.ShaderMaterial无需预先定义也应该有效。

此外，如果您需要简单的 Material ，忽略 block 并从头开始编写所需的着色器可能会更快。