Javascript 在运行时更改three.js材质纹理会引发错误

好的，我可以完全访问材质，我可以在运行时更改它的颜色，但是尝试更改贴图纹理会出错

比如说

var materials = mesh.material.materials;
materials[index].color.setHex(0xb60430);
materials[index].needsUpdate = true;
scene.render();

但是，在相同的情况下，这完全可以正常工作

var materials = mesh.material.materials;
var texture = new THREE.Texture(myPreloadedImageObject);
materials[index].map = texture;
materials[index].needsUpdate = true;
scene.render();

这会抛出一个错误（如果有点奇怪，请原谅，我无法从节点webkit控制台复制粘贴）

[.WebGLRenderingContext]GL错误：GL\u无效\u操作：GL抽屉元素：尝试访问属性1中超出范围的顶点

注意，我也可以像这样移除材质

materials[index] = 0;
scene.render();

而且它也不会抛出错误

来自github问题部分的s9k建议

geometry.buffersNeedUpdate = true;
geometry.uvsNeedUpdate = true;

我这样做了，现在它没有抛出一个错误，但它只是没有做任何事情…材料保持不变。同样，如果我尝试设置颜色，它会起作用，但是如果我尝试设置颜色和材质，什么也不会发生

如果我在渲染后记录材质，它确实有一个贴图集作为纹理，但由于某种原因，我猜它没有被渲染

---

有什么想法吗？这是一个bug吗？

这是对three.js长方体几何体的three.js r68工作纹理更改，也许这有助于您在代码中发现问题：

工作链接：

代码：

---

看看能不能帮你。如果没有，那么您需要提供的不仅仅是代码片段；geometry.buffersNeedUpdate=true；geometry.uvsNeedUpdate=true；解决方案，但不起作用。所以另一种方法是设置一个空白纹理？我不明白怎么可能在没有问题的情况下更改颜色，但是更改贴图会产生错误。这怎么可能？网格是基本体还是导入的模型。我在尝试将纹理材质放置在没有UV的网格上时看到过此错误。值得深思的是，网格是由长方体几何体制成的，它没有被导入，它是用三个几何体创建的，这是r68的最新版本（mrdoob在github问题方面要求使用dev branch测试原始的有问题的几何体，所以只想检查这里使用的是哪个版本）.是的，除了使用

Three.ImageUtils

对象（我没有这样做，我的图像对象都是预加载的）之外，我在这里所做的工作没有任何不同。我用这个试试看，看有没有什么不同。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(3,3,3);
var texture = THREE.ImageUtils.loadTexture( "a.png" );  
var texture2 = THREE.ImageUtils.loadTexture( "b.png" ); 
var material = new THREE.MeshBasicMaterial({color: 0x00ff00, map:texture});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;
var frame = 0;

function render() {
    frame++;
    if (frame > 120) {
        material.map = texture2;
        material.needsUpdate = true;
        console.log('texture change')
    }
    if (frame > 240) {
        material.map = texture;
        material.needsUpdate = true;
        frame = 0;
        console.log('texture change')
    }

    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
};

render();