Currently, I am attempting to dynamically swap the image texture on a loaded .obj file in three.js. Below is the modified code extracted from the three.js examples:

        var container, stats;
        var camera, scene, renderer;
        var mouseX = 0, mouseY = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;


        init();
        animate();


        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.z = 100;

            //scene
            scene = new THREE.Scene();

            var ambient = new THREE.AmbientLight( 0x101030 );
            scene.add( ambient );

            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 );
            scene.add( directionalLight );

            //manager
            var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {

                console.log( item, loaded, total );

            };

            //model
            var loader = new THREE.OBJLoader( manager );
            loader.load( 'obj/female02/female02.obj', function ( object ) {
                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) {
                        //create a global var to reference later when changing textures
                        myMesh = child;
                        //apply texture
                        myMesh.material.map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg');
                        myMesh.material.needsUpdate = true;
                    }

                } );


                object.position.y = - 80;
                scene.add( object );

            } );

            //render
            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            window.addEventListener( 'resize', onWindowResize, false );

        }

        function newTexture() {
            myMesh.material.map = THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg');
            myMesh.material.needsUpdate = true;
        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function onDocumentMouseMove( event ) {

            mouseX = ( event.clientX - windowHalfX ) / 2;
            mouseY = ( event.clientY - windowHalfY ) / 2;

        }

        //animate
        function animate() {

            requestAnimationFrame( animate );
            render();

        }

        function render() {

            camera.position.x += ( mouseX - camera.position.x ) * .05;
            camera.position.y += ( - mouseY - camera.position.y ) * .05;

            camera.lookAt( scene.position );

            renderer.render( scene, camera );

        }

The only additional feature added was the 'newTexture' function and a mesh reference named 'myMesh'. You can find the original example here. However, despite no error logs, the .obj file doesn't update as expected. It seems like I might have overlooked something crucial here..

Update: In response to the insightful answer below, here's the revised code with extra functionalities for swapping textures using an input field:

  
var container, stats; 
var camera, scene, renderer; 
var mouseX = 0, mouseY = 0; 
var windowHalfX = window.innerWidth / 2; 
var windowHalfY = window.innerHeight / 2; 
var globalObject; 

init(); 
animate(); 

function init() { 
    container = document.createElement('div'); 
    document.body.appendChild(container); 
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000); 
    camera.position.z = 100; 
    //scene 
    scene = new THREE.Scene(); 
    var ambient = new THREE.AmbientLight(0x101030); 
    scene.add(ambient); 
    var directionalLight = new THREE.DirectionalLight(0xffeedd); 
    directionalLight.position.set(0, 0, 1); 
    scene.add(directionalLight); 
    //manager 
    var manager = new THREE.LoadingManager(); 
    manager.onProgress = function(item, loaded, total) { 
        console.log(item, loaded, total); 
    }; 
    //model 
    var loader = new THREE.OBJLoader(manager); 
    loader.load('obj/female02/female02.obj', function(object) { 
        //store global reference to .obj 
        globalObject = object; 
        object.traverse(function(child) { 
            if (child instanceof THREE.Mesh) { 
                child.material.map = THREE.ImageUtils.loadTexture('textures/grid.jpg'); 
                child.material.needsUpdate = true; 
            } 
         }); 
         object.position.y = -80; 
         scene.add(object); 
     }); 
    
     renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     container.appendChild(renderer.domElement); 
     
     document.addEventListener('mousemove', onDocumentMouseMove, false); 
     window.addEventListener('resize', onWindowResize, false); 
} 

function onWindowResize() { 
    windowHalfX = window.innerWidth / 2; 
    windowHalfY = window.innerHeight / 2; 
    camera.aspect = window.innerWidth / window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

function onDocumentMouseMove(event) { 
    mouseX = (event.clientX - windowHalfX) / 2; 
    mouseY = (event.clientY - windowHalfY) / 2; 
} 

//animate 
function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    camera.position.x += (mouseX - camera.position.x) * 0.05; 
    camera.position.y += (-mouseY - camera.position.y) * 0.05; 
    camera.lookAt(scene.position); 
    renderer.render(scene, camera); 
} 

function newTexture() { 
    var newTexturePath = "textures/" + document.getElementById("texture").value + ""; 
    globalObject.traverse(function(child) { 
        if (child instanceof THREE.Mesh) { 
            child; 
            child.material.map = THREE.ImageUtils.loadTexture(newTexturePath); 
            child.material.needsUpdate = true; 
        } 
    }); 
}