具有单个绘制调用的多个纹理

Question

你好，我想为每个立方体创建多个具有不同纹理的立方体。 为了获得最佳性能，我创建了具有合并几何形状的单个网格。但我对纹理有疑问，因为直到现在我必须对每个纹理进行一次绘制调用。 我想知道是否存在一种方法来拥有像几何这样的单个合并纹理，这样我可以创建一个只有一个绘制调用的大纹理化网格。

我的实际代码是这样的。

var geometry = new THREE.Geometry();
    var materials = [];

    for(var p: number = 0; p < 1000; p++){
        var height = Math.floor((Math.random() * 100) + 50);

        var box = new THREE.BoxGeometry(10, 5, 10);        
        box.translate(
           Math.floor((Math.random() * 100) + 50), 
           Math.floor((Math.random() * 100) + 50), 
           Math.floor((Math.random() * 100) + 50));

        var texture = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load(textures[p])});
        texture.needsUpdate = true;

        geometry.merge(box);
        materials.push(texture);                         
     }

      var mesh = new THREE.Mesh(geometry, materials);        
      el.setObject3D("mesh", mesh);  

我认为方法是为每个几何体创建一个纹理，或者创建不同的纹理以合并到一个纹理中。 每个建议都被很好地接受了提前感谢。

我使用 a-frame v.0.7.1，但在这种情况下，我认为这更像是一个 threejs 问题

Answer 1

您可以将所有纹理图像合并到一个纹理图集中。然后根据几何体修改 UV 以指向所需的纹理。

https://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1

该指南的摘录：

var texture = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load('textureatlas.png')});

var bricks = [
  new THREE.Vector2(0, .666),
  new THREE.Vector2(.5, .666),
  new THREE.Vector2(.5, 1),
  new THREE.Vector2(0, 1)
];

geometry.faceVertexUvs[0] = [];
geometry.faceVertexUvs[0][0] = [ bricks[0], bricks[1], bricks[3] ];
geometry.faceVertexUvs[0][1] = [ bricks[1], bricks[2], bricks[3] ];

由于您要合并几何图形，因此只需确保 UV 转移过来（也许它们会自动转移）。