[SOLVED] How can I dynamically update a 3D model's texture in real-time using Three.js and WebGL?

How can I dynamically update a 3D model's texture in real-time using Three.js and WebGL?

I'm working on a web application that involves rendering 3D models using Three.js and WebGL. I need to dynamically update the texture of a 3D model based on user interactions. Specifically, I want to change the texture of the model in real-time when the user selects a new texture from a dropdown menu.

I've tried the following approaches but haven't been successful:

Using TextureLoader to load new textures and applying them to the model's material.

Attempting to update the map property of the material with the new texture.

Re-rendering the scene after updating the texture.

Here's my sample code:

var loader = new THREE.TextureLoader();
var material = new THREE.MeshBasicMaterial({ map: loader.load('initialTexture.jpg') });
var geometry = new THREE.BoxGeometry(1, 1, 1);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function updateTexture(newTexturePath) {
    var newTexture = loader.load(newTexturePath);
    cube.material.map = newTexture;
    cube.material.needsUpdate = true;
    renderer.render(scene, camera);
}

document.getElementById('textureDropdown').addEventListener('change', function(event) {
    updateTexture(event.target.value);
});

Solution

The texture might not be updating correctly because it may not load completely before being applied to the material. To fix this issue, implement a callback function to ensure the texture is applied only after it is fully loaded.