three.js 将几何图形与 ShaderMaterials 合并答案

【问题标题】：three.js merging geometry with ShaderMaterialsthree.js 将几何图形与 ShaderMaterials 合并
【发布时间】：2012-11-20 12:18:51
【问题描述】：

我有一个基于瓦片集的项目，我目前通过一些 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”。

我不知道我错过了什么。

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

【问题讨论】：

你使用的是什么版本的库？
小提琴是 r50。见github.com/mrdoob/three.js/wiki/Migration。材料不再是几何的一部分。查看几何合并源代码，如果您认为有错误，请报告错误。我不确定此时应该采取什么适当的行为。
嗯，它可能不像删除功能那样是一个错误。将寻找另一种方法。

标签： merge geometry three.js

【解决方案1】：

感谢这篇文章，cmets 对找到解决方案很有帮助。您应该将其作为唯一参数提供给 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

【讨论】：