Question

我有一个基于tileset的项目，我目前通过一些ShaderMaterials映射到CubeGeometries。

渲染立方体时，立方体边缘会有出血和闪烁。此外，在性能方面，这似乎是一种非常糟糕的方式。

所以我查看了THREE.GeometryUtils.merge，它显然将我的立方体合并到一个几何体，顶点和所有。

是否可以使合并的网格保留我在每个立方体上使用的材料？有没有更好的方法来完成我想要做的事情？

修改这是一个不起作用的例子。

var shaderMat1 = new THREE.ShaderMaterial({
    fragmentShader: document.getElementById("red-fragment").innerText,
    vertexShader: document.getElementById("vertex").innerText
});
var shaderMat2 = new THREE.ShaderMaterial({
    fragmentShader: document.getElementById("blue-fragment").innerText,
    vertexShader: document.getElementById("vertex").innerText
});

var cube1 = new THREE.Mesh(new THREE.CubeGeometry(64, 64, 64), new THREE.MeshFaceMaterial([shaderMat1, shaderMat1, shaderMat1, shaderMat1, shaderMat1, shaderMat1]));
cube1.position.x = 0;
cube1.position.y = 300;

var cube2 = new THREE.Mesh(new THREE.CubeGeometry(64, 64, 64), new THREE.MeshFaceMaterial([shaderMat2, shaderMat2, shaderMat2, shaderMat2, shaderMat2, shaderMat2]));
cube2.position.x = 64;
cube2.position.y = 300;

var geo = new THREE.Geometry();
THREE.GeometryUtils.merge(geo, cube1);
THREE.GeometryUtils.merge(geo, cube2);

var mergedMesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial());

scene.add(mergedMesh);

在尝试使用网络上的几个地方使用的MeshFaceMaterial时，它会出现错误，“Uncaught TypeError：无法读取未定义的属性'map'”。

我无法弄清楚我错过了什么。

EDIT2： 我找到的一个解决方法是遍历新几何体的所有面，并在调用geometry.mergeVertices（）之前对其应用materialIndex。

Answer 1

感谢这篇文章，评论有助于找到解决方案。您应该将它作为MeshFaceMaterial的唯一参数提供，而不是将材质数组提供给Geometry。

CoffeeScript中的示例：

materials = []
for i in [0...6]
    texture = window["texture_" + i] # This is a Texture that has already been loaded
    materials.push new THREE.MeshBasicMaterial(
        color   : color
        map     : texture
    )
size = 1
geometry = new THREE.CubeGeometry size, size, size
cube = new THREE.Mesh geometry, new THREE.MeshFaceMaterial materials
cube.position.x = x
cube.position.y = y
cube.position.z = z  
scene.add cube  
return cube

three.js将几何与ShaderMaterials合并

1 个答案: