每面具有不同纹理材料的不规则多面体答案

【问题标题】：Irregular polyhedron with different texture materials on each face每面具有不同纹理材料的不规则多面体
【发布时间】：2015-10-23 17:19:58
【问题描述】：

我正在尝试在三个.js 中创建一个truncated icosidodecahedron，在每个不同的面部形状上使用不同的图像纹理。

我一直使用 this Three.js example 的源代码作为我的代码的基础（因为我对 Three.js 和 3D 非常陌生），但我无法让纹理材质正常工作。

我相信，这是下面代码的重要部分。在这个工作示例中，我有三种纯色材质，根据每个面的顶点数进行选择。

var materials           = [
    new THREE.MeshBasicMaterial({ color: 0x00ccdd }),
    new THREE.MeshBasicMaterial({ color: 0xccff00 }),
    new THREE.MeshBasicMaterial({ color: 0x6600ff })
];

var faceMaterial        = new THREE.MeshFaceMaterial(materials);

var faceGeom            = new THREE.Geometry();
    faceGeom.vertices   = vertices;

var faceIndex           = 0;

for (var i = 0; i < data.faces.length; i++) {
    var vertexIndexes   = data.faces[i];
    var vertexCount     = vertexIndexes.length;

    for (var j = 0; j < vertexIndexes.length - 2; j++) {
        var face        = new THREE.Face3(vertexIndexes[0], vertexIndexes[j + 1], vertexIndexes[j + 2]);

        switch (vertexCount) {
            case 4:  face.materialIndex = 0; break;
            case 6:  face.materialIndex = 1; break;
            case 10: face.materialIndex = 2; break;
        }

        faceGeom.faces[faceIndex]   = face;
        faceIndex++;
    }
}

这正确地产生了这个：

但是，当我尝试将其中一种材质更改为图像纹理时，如下所示：

var materials           = [
    new THREE.MeshBasicMaterial({ color: 0x00ccdd }),
    new THREE.MeshBasicMaterial({ color: 0xccff00 }),
    new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture("assets/images/lovely-texture.jpg")
    }),
];

。我收到一堆奇怪的 WebGL 错误，并且没有出现纹理。

[.WebGLRenderingContext-0x7ffc6a6f3ef0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
WebGL: too many errors, no more errors will be reported to the console for this context.

我想知道我是否犯了一个简单的错误，或者问题是否在于尝试将纹理应用于 Face3 三角形？

有没有更好的方法来构建这个对象并能够在不同的面上显示不同的纹理？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

如果您的材质具有纹理，则您的网格几何体必须定义 UV。

有关设置THREE.Geometry 属性faceVertexUvs[ 0 ] 的一种方法的示例，请参阅SphereGeometry.js。

如何设置 UV 取决于您。你可能想从一个更简单的例子开始，首先，你要掌握它的窍门。

three.js r.71

【讨论】：

谢谢！如果我解决了这个问题，我会调查并报告。