动态变化很多纹理的性能非常低

Question

我是Three js的新手。在我的项目中，我需要绘制一个具有很多纹理的地面。地面有很多层，每层有4个纹理，不同层的纹理大小不同。下图描述了地面：   地面是一个网格有多种材料：

this.mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));

假设我有一辆车总是在地面中心，换句话说，所有层的中心。当它移动时，地面将平移以确保汽车始终处于中心位置。所以每次地面翻译，我都需要在新位置更新纹理。   图片绘制了3层图示，但在我的项目中是6层。因此每次所有纹理都发生变化，这意味着需要更改6 * 4 = 24个纹理，这会导致程序中的fps变低。
   这是我每次纹理更改时从索引DB加载纹理的功能：

Ground.prototype.loadTextureFromIndexedDB = function (url, materialIndex) {
var loader = new THREE.TextureLoader();
loader.crossOrigin = '';
loader.load(url,
    function (texture) {
        var groundMaterial = ground.mesh.material.materials[materialIndex];        

        groundMaterial.map.dispose();
        groundMaterial.map = texture;
        groundMaterial.map.anisotropy = ground.maxAnisotropy;
        groundMaterial.map.minFilter = THREE.LinearFilter;
        groundMaterial.map.needsUpdate = true;
        img = null;
        window.URL.revokeObjectURL(url);           
    });
}

我尝试了很多解决方案。其中一个是使用BufferGeometry创建一个网格，使用ShaderMaterial数组创建MultiMaterial。正如我所知，它是三个JS中性能最好的，不是吗？如果它可能那么三个JS并不像我想象的那么强大。我应该为我的项目更改为另一个API吗？ 有人建议我在我的程序中提高性能吗？非常感谢！