Javascript 重复使用几何体会导致间歇性THREE.JS纹理错误

我正在用Firefox和Chrome的THREE.js创建我的第一个游戏（纸牌游戏），目前我遇到了一个间歇性错误，导致我的一些纹理不可见

我写这篇文章的目的是了解为什么会发生这种情况，这样我就可以找到解决方案。我将在文章的末尾添加我的问题

在加载场景之前切换浏览器选项卡时，这种情况会更频繁地发生

我已经检查了我的代码，以验证我是否正在将新材质设置为场景中已加载的网格，但事实并非如此

我正在使用带箔卡的镜面反射贴图，我在堆栈溢出中尝试了相关的解决方案，但没有成功。我还尝试删除镜面反射贴图

我还阅读了关于在对象进入场景后为添加的材质设置更新标志的内容，但它也不起作用

我也研究过类似的帖子，但这两篇总结了我必须尝试解决问题的选项

错误：

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.

卡对象创建步骤： 1-在游戏加载上创建基础几何体 2-将其重新用于正在创建的所有卡

基本几何体创建（顶点/面操纵是为具有顶点颜色的边界创建黑灰黑渐变：三个顶点颜色）：

进入：

我不应该重复使用相同的几何图形吗

我仍然不明白为什么它会使错误消失，我想解释一下为什么它解决了这个错误（也许它也是导致这个错误的原因）

---

当我编写一个50行代码试图重现错误时，我重复使用了几何图形，错误从未发生过。我还使用了相同的函数来创建产生问题的对象。

我会尝试使用onLoad事件的回调来控制代码的计时和执行。比如说改变

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

到

使用回调函数确保加载已完成，然后再继续

---

抱歉耽搁了，我已经有一点没登录stack了。我认为这里的问题是，您试图将多个纹理应用于同一几何体。我认为他们应该互相超越，但我想不是。克隆几何体允许将每个纹理应用于其自己的对象。或者至少这是我对事情的看法。

我做了一些事情，使错误不再发生

---

我正在编辑我的问题，因为我想了解它为什么会发生。

你能制作一个50行的程序来演示这个问题吗？我制作了一个50行的程序，执行与我在问题中强调的完全相同的步骤，但是50行的程序根本没有产生错误。我可以提供屏幕截图，显示工作版本的输出以及错误发生的时间。但是，如果这变成了“帮助我调试我的程序”，我明白没有什么可以回答我的问题，我将删除我的问题。如果可以，我将很高兴尝试帮助你。试着用一个简单的例子来重现这个问题。您是否在运行时添加了一个以前没有纹理的纹理？没有。我看到了您以前对有类似问题的人的回答，并进行了检查。在我发布的示例中，它创建了所有代码，在创建了所有代码之后，它开始渲染。我现在只有以下提示：1-不将卡片对象添加到场景中根本不会产生问题。2-在新代码中，仅向场景中添加对象从未导致问题发生。我能够解决该错误，但我现在需要了解它发生的原因。已经改变了这一点。我添加了一个onLoad回调，它统计我试图添加到游戏中的纹理，在检查是否达到预期的纹理数量之前，我有一个window.interval。只有在那之后，我才能继续渲染游戏。此外，我还在OneError回调中添加了一个console.log调用。当错误发生时，控制台中没有显示onError函数的额外内容。我正在尝试缩小代码。我从头开始重建场景，它没有显示任何错误。尝试从除有错误的元素之外的所有元素中删除场景会导致错误发生。错误仍然存在。我试图解决它是缩小css和js，加上缓存纹理而不是创建新的。我能够解决这个错误，但我现在需要理解为什么会发生。

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;
    }

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));

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

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