如何在没有THREE.MultiMaterial的情况下将纹理添加到多维数据集的一侧以减少绘制调用

Question

所以，让我们说这是一个有2种材料的立方体。我使用的是MultiMaterial，但也许这不是正确的方法，因为它显示了6个绘制调用，而不是2.我们在扩展时担心性能。 http://codepen.io/glued/pen/JXmvzm

这只是一个例子，我知道FaceColors，但想将meshBasicMaterial与另一个Material混合，比如说，用纹理。

var greenMaterial = new THREE.MeshBasicMaterial({ color: 0xc4f288 })
var orangeMaterial = new THREE.MeshBasicMaterial({ color: 0xf4511e })
var mats = [
  orangeMaterial,
  greenMaterial,
  orangeMaterial,
  orangeMaterial,
  greenMaterial,
  orangeMaterial
]

let box = new THREE.Mesh(geometry, new THREE.MultiMaterial( mats ))

如果我使用了vertexColors：FaceColors和一个纹理： new MeshBasicMaterial({ vertexColors: FaceColors, map:someTexture }))

我如何仅为特定面部指定纹理？

Answer 1

我通过创建具有纹理的材质并去除几何面上的UV来解决这个问题，我没有使用

纹理是128x256，请使用2d画布生成

texture.repeat.y = 0.5
texture.offset.y = 0.5

let geometry = new THREE.BoxGeometry(50, 50, 50)

function assignUvAndColor(geo, i, color = 0x00cbff){
  geo.faceVertexUvs[0][i] = new Array(3).fill(new THREE.Vector2(0, -1))
  geo.faces[i].color.setHex(color)
}

const greenColor = 0xacffd3
assignUvAndColor(geometry, 3, greenColor)
assignUvAndColor(geometry, 2, greenColor)
assignUvAndColor(geometry, 0, greenColor)
assignUvAndColor(geometry, 1, greenColor)
assignUvAndColor(geometry, 4)
assignUvAndColor(geometry, 5)
assignUvAndColor(geometry, 6)
assignUvAndColor(geometry, 7)

let material = new THREE.MeshBasicMaterial({  map: texture, vertexColors: THREE.FaceColors })
let box = new THREE.Mesh(geometry, material)

http://codepen.io/glued/pen/grBEmo?editors=0010

Answer 2

多材料将始终执行N个drawcalls，其中N =其材料数组的长度 （见renderer implementation）

它甚至没有尝试检查它的某些材料是否在引用中是重复的 - 所以在你的例子中你有多种材料，有6种材料= 6个drawcalls

您必须更改几何面材质索引或放弃使用多材质并手动划分几何