複数のテクスチャと1つのdrawcall

Question

こんにちは私はキューブごとに異なるテクスチャで複数のキューブを作成したいと思います。 最高のパフォーマンスを持っています。私は、結合されたジオメトリを持つ単一のメッシュを作成しました。私はテクスチャに問題があります。なぜなら今まではテクスチャごとに描画呼び出しを行う必要があるからです。 ジオメトリのような単一のマージされたテクスチャを持つメソッドが存在するかどうかを知りたいのですが、この方法で1回の描画呼び出しで1つの大きなテクスチャ化されたメッシュを作成できます。

私の実際のコードはこれです。

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); 

ジオメトリごとにテクスチャを持たせたり、1つのテクスチャでマージするために異なるテクスチャを作成する方法があると思います。 すべてのアドバイスは事前に感謝の意を表します。

私は、フレームの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がオーバー転送を確認する必要があります。