Search code examples
javascriptthree.jstextures

Can a three.js material have separate repeat values for a bump map and a texture map?


I'm trying to break up the repetition in my texture by applying a bump map which repeats much less frequently. Unfortunately, it seems to take on the repeat value of 'landTexture' below (64), instead of the value I set it to (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 });

If I comment out map:landTexture, then the bump map scale is 1. Can I mix these two repeat values somehow?


Solution

  • No. The offset and repeat values default to one of them:

    // 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
    

    In your case, that would be the landTexture settings.

    The workaround is to modify your textures, or create a custom ShaderMaterial.

    EDIT: The exception is light map and ambient occlusion map, which each use the second set of UVs. This allows the other textures to be of higher detail than the light/AO map.

    three.js r.84