每面都有不同纹理材质的不规则多面体

Question

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

我一直在使用this Three.js example的源代码作为我的代码的基础（因为我对Three.js和3D很新），但是我无法使纹理材质正常工作。< / p>

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

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三角形？

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

Answer 1

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

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

如何设置UV取决于您自己。您可能希望从一个更简单的示例开始，首先，您可以了解它。

three.js r.71