Encountering issues when dynamically altering the material texture in three.js during runtime

Question

Encountering issues when dynamically altering the material texture in three.js during runtime

Having full control over a material, changing its color at runtime is seamless. However, attempting to change the map texture results in an error.

For instance:

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

The aforementioned code works perfectly fine. But in a similar scenario:

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

An error occurs (unable to copy from node-webkit console):

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

Note that removing the material like this also does not trigger any error:

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

s9k on the github issues section recommended:

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

Following this advice resolved the error, however, it did not change anything. When trying to set both color and material, no changes are applied even though the material appears to have the correct textures set upon inspection after rendering.

Any thoughts or suggestions? Could this be a bug?

javascript three.js textures texture-mapping

Answer 1

Answer №1

Check out this cool demo using three.js r68 to change textures on a box geometry:

See it in action here:

Take a look at the code snippet below:

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

Answer 2

Check out this cool demo using three.js r68 to change textures on a box geometry:

See it in action here:

Take a look at the code snippet below:

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

Encountering issues when dynamically altering the material texture in three.js during runtime

Answer №1

Similar questions

Displaying JSON data in a div: a step-by-step guide

Tips for configuring jQtree to initially display the tree structure from the HTML source

Unable to save captured signature image during saveEvent function in React Native

What is the best way to determine the width and height of text within a TextArea using JavaScript in an HTML document

Is there a more efficient method to achieve the desired effect without making multiple calls to jQuery ajaxSuccess?

Tips for simulating an axios request that returns an image buffer

Encountering issues trying to display state value retrieved from an AJAX call within componentDidMount in React

What sets apart the Jquery Function Template from the Method Template?

Determine the Placement of Bootstrap Popover by Utilizing SVG and Mouse Coordinates

Is it possible to place an open div panel between two tweets?

How can touchEvents in Three.js Mobile iOS v8.4 be handled as mouseEvents?

React Router relies on a DOM for Browser History to function properly

Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Creating dynamic visual elements on a webpage using HTML: Video

ng grid shift select issue mistakenly selects extra rows

Signal processing aborted as QML QObject was destroyed prematurely

Explaining the jQuery $.post method

Trouble accessing JSON file on FileZilla/FTP server

Express JS encountering Firebase Google Sign-In glitch