2

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)

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 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

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?

WestLangley
  • 102,557
  • 10
  • 276
  • 276
Rohan Deshpande
  • 694
  • 8
  • 22
  • See if http://stackoverflow.com/questions/16531759/three-js-map-material-causes-webgl-warning/16533812#16533812 helps you. If not, then you need to provide more than code fragments. – WestLangley Oct 16 '14 at 09:22
  • Hmm I've tried the material.needsUpdate = true; geometry.buffersNeedUpdate = true; geometry.uvsNeedUpdate = true; solution, but it didn't work. So another way is to set a blank texture? – Rohan Deshpande Oct 16 '14 at 09:44
  • I don't understand how it's possible to change the colour without issue but changing the map gives an error. How is that possible? – Rohan Deshpande Oct 16 '14 at 11:15
  • Is your mesh a primitive or an imported model. I've seen this glDrawElements error when attempting to put a textured material on a mesh with no UV's. Food for thought – Darryl_Lehmann Oct 16 '14 at 12:41
  • The mesh is made from a box geometry, it hasn't been imported, it's created with three – Rohan Deshpande Oct 16 '14 at 19:14
  • I've gotten around this my setting the texture as a reference in my level matrix and then simply redrawing the whole scene, it's fine for my use case as this is an in-house tool anyway. But I would still like to know why this happens. – Rohan Deshpande Oct 17 '14 at 01:20

1 Answers1

2

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:

Working link: 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();
JPS
  • 411
  • 6
  • 16
  • and that's with r68 i.e. the current release (mrdoob was asking on the github issues side to test the original problematic one with dev branch so just wanted to check which version was in use here). – antont Oct 17 '14 at 17:57
  • Yeah I don't see any different here with what I am doing other than using the `Three.ImageUtils` object (which I'm not doing, my image objects are all preloaded). I'll give it a shot with this and see if it makes a difference. – Rohan Deshpande Oct 17 '14 at 21:21