Geometry reuse causes intermittent THREE.JS texture error

Question

I am creating my first game (Card Game) with THREE.js for Firefox and Chrome, and I am currently stuck in an intermittent error that makes some of my textures invisible.

My object with this post is to understand why this is happening, so I can work on a solution. I will add my questions at the end of the post.

This happens more often when I switch browser tabs before loading the scene.

I already checked my code to check if I installed new materials for already loaded grids in this scene, and this is not so.

I use mirrored cards with cards with foil, and I used related solutions in Stack Overflow with some problems. I also tried to remove the mirror cards.

I also read about setting update flags for added materials after the object is in the scene and it also does not work.

There were similar notes that I also studied, but these two summed up the results that I had to solve in order to solve the problem.

Error:

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

Steps to create a map object: 1 - Create the basic geometry when loading the game 2 - Reuse it for all created maps.

Creating basic geometry (manipulation with vertices / faces consists in creating a gradient with black gray-black for borders with vertices of colors: THREE.VertexColors):

(function createGeometry () {
DBZCCG.Card.backTexture = THREE.ImageUtils.loadTexture(
    "images/DBZCCG/back.jpg");

DBZCCG.Card.cubeGeo = 
    new THREE.CubeGeometry(
        DBZCCG.Card.cardWidth, 
        DBZCCG.Card.cardHeight, 
        DBZCCG.Card.cardDepth
    );

/* Vertex and face alterations */
var cube = DBZCCG.Card.cubeGeo;
var vertices = cube.vertices;
var faces = cube.faces;

vertices.push(vertices[7].clone());
vertices.push(vertices[5].clone());
vertices.push(vertices[0].clone());
vertices.push(vertices[2].clone());

vertices[5].color = vertices[0].color = vertices[2].color = vertices[7].color
        = new THREE.Color(0x777777);

vertices[5].z = vertices[0].z = vertices[2].z = vertices[7].z = 0;

faces[8].a = 9;
faces[8].b = 8;
faces[8].c = 10;

faces[9].a = 8;
faces[9].b = 11;
faces[9].c = 10;

faces.push(new THREE.Face3(9, 5, 7));
faces.push(new THREE.Face3(9, 7, 8));

faces.push(new THREE.Face3(0, 10, 2));
faces.push(new THREE.Face3(10, 11, 2));

faces.push(new THREE.Face3(8, 7, 2));
faces.push(new THREE.Face3(8, 2, 11));

faces.push(new THREE.Face3(5, 9, 0));
faces.push(new THREE.Face3(0, 9, 10));

for (var i = 0; i < faces.length; i++) {
    if (vertices[faces[i].a].color === undefined) {
        faces[i].vertexColors[0] = new THREE.Color(0x000000);
    } else {
        faces[i].vertexColors[0] = vertices[faces[i].a].color;
    }

    if (vertices[faces[i].b].color === undefined) {
        faces[i].vertexColors[1] = new THREE.Color(0x000000);
    } else {
        faces[i].vertexColors[1] = vertices[faces[i].b].color;
    }

    if (vertices[faces[i].c].color === undefined) {
        faces[i].vertexColors[2] = new THREE.Color(0x000000);
    } else {
        faces[i].vertexColors[2] = vertices[faces[i].c].color;
    }
}

})();

And here is the map creation function:

function createCard(texturePath) {
        var card = new THREE.Object3D();
        DBZCCG.loadCounter++;
        var frontTexture = texturePath ? 
            THREE.ImageUtils.loadTexture(texturePath,
            THREE.UVMapping,
            DBZCCG.incrementLoad) 
            : null;
        DBZCCG.loadCounter++;
        var specularMap =
            THREE.ImageUtils.loadTexture(
                'images/DBZCCG/saiyan/specularmap.jpg',
                THREE.UVMapping, DBZCCG.incrementLoad);

        var cardCoverBackMaterials = [];
        for (var i = 0; i < 4; i++) {
            cardCoverBackMaterials.push(new THREE.MeshBasicMaterial(
                    {
                        transparent: true,
                        emissive: 0xFFFFFF,
                        vertexColors: THREE.VertexColors
                    })); // sides
        }

        cardCoverBackMaterials[4] = new THREE.MeshBasicMaterial(
                {
                    transparent: true,
                    emissive: 0xFFFFFF,
                    map: DBZCCG.Card.backTexture
                }); // back

        cardCoverBackMaterials[5] = new THREE.MeshBasicMaterial(
            {
                transparent: true,
                reflectivity: dataObject.foil ? 
                    dataObject.foil.reflectivity : 1,
                specularMap: specularMap,
                envMap: dataObject.foil ? dataObject.foil.texture : null,
                emissive: 0xFFFFFF,
                map: frontTexture
            }); // front

        for (var i = 0; i < 4; i++) {
            cardCoverBackMaterials.push(
                new THREE.MeshBasicMaterial({
                   transparent: true,
                   emissive: 0xFFFFFF
            })); // sides
        }

        var cube = new THREE.Mesh(
            DBZCCG.Card.cubeGeo, 
            new THREE.MeshFaceMaterial(cardCoverBackMaterials));

        card.add(cube);

        return card;
    }

Questions:

1 - Is there anything I can do to try to solve this?

2 - Is this related to the rendered scene before the objects were added to the scene?

3 - Is this related to the scene that was made before loading the textures?

4 - Q2 Q3 . .

5 - webgl ? ?

TL/DR; WebGL . THREE.js.

THREE.js r66

EDIT: : .

,

---

:

.

:

var cube = new THREE.Mesh(DBZCCG.Card.cubeGeo, 
new THREE.MeshFaceMaterial(cardCoverBackMaterials));

:

var cube = new THREE.Mesh(DBZCCG.Card.cubeGeo.clone(), 
new THREE.MeshFaceMaterial(cardCoverBackMaterials));

?

, , , (, , ).

50- , , , . , .

Answer 1

onLoad, . ,

 DBZCCG.Card.backTexture = THREE.ImageUtils.loadTexture(
   "images/DBZCCG/back.jpg"); 

to

 DBZCCG.Card.backTexture = THREE.ImageUtils.loadTexture(
   "images/DBZCCG/back.jpg", new THREE.UVMapping(), function() { ... } ); 

, , .

, , . , , . , , , . . , , .

Answer 2

-, - .

, , .