How to change the texture of a 3D model on click?

Question

three.js

Good afternoon! I can’t change the texture of a 3D model on click in Realtime, I can’t find in Google what is responsible for redrawing an object. I looked at the examples in the Three.js reference book, I still can’t understand what is responsible for what :( Help me figure it out.
The function works, and the variable gets the value of the new texture, but naturally there are no changes.

// Сhange material color
   
          const color_white = { materials: "white" };
          const color_grey  = { materials: "grey"  };
          const color_craft = { materials: "craft" };

          changeColor = function(input) {
            if (input.value === "craft") {
              materials = color_craft.materials;
            } else if (input.value === "grey") {
              materials = color_grey.materials;
            } else if (input.value === "white") {
              materials = color_white.materials;
            }
            console.log(materials);
          };
        // Create Camera
          camera = new THREE.PerspectiveCamera(current_box.perCam, window.innerWidth / window.innerHeight, 0.25, 20);
          camera.position.x = current_box.posX;
          camera.position.y = current_box.posY;
          camera.position.z = current_box.posZ;
          camera.rotation.y += 1 * (Math.PI/180);
        // Create a Controls 
          controls = new THREE.OrbitControls(camera, container);
          controls.enablePan = false;
          controls.enableZoom = true;
          controls.minDistance = current_box.minDistance;
          controls.maxDistance = current_box.maxDistance;
          controls.update();

        // Object resize
        function resize() {
          camera.aspect = w / h;
          camera.updateProjectionMatrix();
          
          renderer.setSize( w, h );

          animate();
          console.log('element resized: ' + w + 'x' + h);
        }
        window.addEventListener('resize', resize);

        // Create a Lights 
        const pointLight = new THREE.PointLight( 0xffffff, 1.0, 3000 );
              pointLight.position.set( 1500, 1500, 1300 );

        const ambientLight = new THREE.AmbientLight( 0x999999 ); // soft white light

          scene.add(ambientLight, pointLight, );
          var onProgress = function ( xhr ) {

          if ( xhr.lengthComputable ) {

            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

          }
        };
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio);
        container.append( renderer.domElement );

       function loadModel() {

          object.traverse( function ( obj ) {

            if ( obj.isMesh )
                obj.material.map = texture;
                material.needsUpdate = true;
          } );

          object.position.y = 0;
          object.position.x = 0;
          object.position.z = 0;
          
          scene.add( object );
          resize();
          animate();
        }

        var manager = new THREE.LoadingManager( loadModel );

        manager.onProgress = function ( item, loaded, total ) {

          console.log( item, loaded, total );

        };
        // Load texture
        var textureLoader = new THREE.TextureLoader( manager );
        var texture = textureLoader.load(basePath+'materials/'+materials+'.jpg', function(){
          material.map = texture;
          material.needsUpdate = true;
        });
        
        var mtlLoader = new THREE.MTLLoader( manager );
        mtlLoader.load(basePath+models+'.mtl', function(materials) {
  
          materials.preload();

          var loader = new THREE.OBJLoader( manager );
          loader.load(basePath+models+'.obj', function ( obj ) {
           
            object = obj;
            scene.add(obj);
            scene.updateMatrixWorld(true);

          }, onProgress, onError);
        });
        function onProgress( xhr ) {

          if ( xhr.lengthComputable ) {

            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );

          }

        }
        function onError() {}
        
        // Render scene
        function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }