2

我有一个基于瓦片集的项目，我目前通过许多 ShaderMaterials 将其映射到 CubeGeometries。

渲染立方体时，立方体边缘会出现渗色和闪烁。此外，就性能而言，这似乎是一种非常糟糕的方法。

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

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

编辑： 这是一个不起作用的例子。

http://jsfiddle.net/CpQ77/3/

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: Cannot read property 'map' of undefined”。

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

Edit2： 我发现的一种解决方法是遍历新几何体的所有面，并在调用geometry.mergeVertices() 之前对其应用materialIndex。

4

1 回答 1

0

感谢这篇文章，评论有助于找到解决方案。您应该将其作为唯一参数提供给 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
于 2012-12-29T06:28:11.977 回答