一个 three.js 的材质可以分别为凹凸贴图和纹理贴图设置不同的重复值吗？

Question

我试图通过应用一个重复频率较低的凹凸贴图来打破纹理中的重复。不幸的是，它似乎采用了下面的'landTexture'（64）的重复值，而不是我设置的值（1）。

landTexture.wrapS = landTexture.wrapT = THREE.RepeatWrapping;
landTexture.repeat.set(64, 64);
bumpTexture.wrapS = bumpTexture.wrapT = THREE.RepeatWrapping;
bumpTexture.repeat.set(1, 1);
var m = new THREE.MeshPhongMaterial({map:landTexture, 
                                     ambient: 0x552811, 
                                     specular: 0x333333, 
                                     shininess: 25, 
                                     bumpMap: bumpTexture, 
                                     bumpScale: 1, 
                                     metal: false });

如果我注释掉map:landTexture，那么凹凸贴图的比例尺就是1。我能否以某种方式混合这两个重复值？

- shino

Answer 1

不需要。偏移量和重复值会默认为其中一个：

// uv repeat and offset setting priorities
//  1. color map
//  2. specular map
//  3. displacement map
//  4. normal map
//  5. bump map
//  5. roughness map
//  5. metalness map
//  6. alpha map
//  7. emissive map

在你的情况下，需要修改 landTexture 设置。

解决方法是修改你的纹理，或创建一个自定义的 ShaderMaterial。

编辑：例外是光照贴图和环境遮蔽贴图，它们都使用第二组UV。这使得其他纹理可以比光照/ AO贴图更详细。

three.js r.84

- WestLangley

Answer 2

是的。在最近的three.js版本中，r90^提供了一个API，可以用来改变内置材质与GLSL的行为。

虽然不容易实现，但已经有了一个例子：

https://github.com/pailhead/three.js/blob/aa72250835b82f7dde2e8375775a4b039cb719c6/examples/webgl_materials_extended_multiple_uvs.html

https://github.com/mrdoob/three.js/pull/14174

基本上，内置材质是基于着色器模板的，这只是一组有序的#include <some_chunk>语句。

其中一些“块”包含类似于以下代码的一些代码：

/*...*/ texture2D( foo, vUv ) /*...*/

当foo是alphaMap、map、specularMap等时，会在插值的uv属性上对该采样器进行纹理查找。您并不真正关心此代码之前或之后发生了什么（它可能只是一个分号;或一些掩码.xy）。

因此，您想要做的是应用一些偏移量，或者像three.js那样应用mat3转换。

因此，GLSL应该如下所示：

texture2D( foo, foo_transform * vUv )

问题在于如何向着色器提供这个统一变量。该示例通过首先编译着色器，然后搜索整个着色器（否则您必须知道在哪些块中查找此纹理查找），采用了一些蛮力方法。

这比修改纹理要好得多，并且实际上应该比编写自定义ShaderMaterial更简单。

免责声明- three并不是真的用来这样使用的，但可以这样使用。因此，例如，虽然每个映射都带有前缀somethingMap，但反照率映射没有，它只被称为map，如果它是albedoMap，则此示例中的正则表达式将更简单。

- pailhead