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

Okay so I have total access to a material, I can change it's colour at runtime, however trying to change the map texture gives an error.

好的，所以我可以完全访问一个素材，我可以在运行时更改它的颜色，但是尝试更改地图纹理会产生错误。

For example

例如

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

this works totally fine, however in the same situation

这种方法完全正常，但在同样的情况下

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

This throws an error (excuse if it's a bit weird I can't copy paste from the node-webkit console)

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

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

[.WebGLRenderingContext] GL错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性1中超出范围的顶点

Note that I can also remove the material like this

请注意，我也可以删除这样的材料

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

And it also does not throw the error.

而且它也没有抛出错误。

s9k from the github issues section suggested

s9k来自github问题部分建议

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

Which I did and now it doesn't throw an error, but it just doesn't do anything...the material remains unchanged. Again if I try to set the colour, it works, but if I try to set the colour and the material, nothing happens.

我做了什么，现在它没有抛出错误，但它只是没有做任何事情......材料保持不变。再次，如果我尝试设置颜色，它可以工作，但如果我尝试设置颜色和材料，没有任何反应。

If I log the material after render, it does indeed have a map set as the texture, but for some reason it isn't being rendered I guess

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

Any ideas? Is this a bug?

有任何想法吗？这是一个错误吗？

1 个解决方案

#1

Here is a three.js r68 working texture change on a three.js box geometry, maybe this helps you find the problem in your code:

这是在three.js框几何上的three.js r68工作纹理更改，这可能有助于您在代码中找到问题：

Working link: http://jppresents.net/static/threetexturechange/texturechange.html

工作链接：http：//jppresents.net/static/threetexturechange/texturechange.html

Code:

码：

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

#1