Option to choose from multiple textures for one obj

Questions
1

Hello. I would like to design my code in such a way that there would be multiple textures to choose from for one obj. Normally for one obj the mtl file contains the textures and UV coordinates and for my 3D model it is just like that, however the thing that I am trying to do is to possibly provide option to basically choose from multiple textures (multiple mtl files basically). I would like to give this option inside a folder however I haven’t been able to figure the coding out.

import * as THREE from 'three'

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'

import Stats from 'three/examples/jsm/libs/stats.module'

import { GUI } from 'dat.gui'

const scene = new THREE.Scene()

scene.add(new THREE.AxesHelper(5))

   

const light = new THREE.PointLight()

light.position.set(2.5, 7.5, 15)

scene.add(light)

const light2 = new THREE.PointLight()

light2.position.set(2.5, 7.5, -15)

scene.add(light2)

const light4 = new THREE.PointLight()

light4.position.set(10.5, 7.5, -15)

scene.add(light4)

const light3 = new THREE.PointLight()

light3.position.set(10.5, 7.5, 15)

scene.add(light3)

const camera = new THREE.PerspectiveCamera(

    75,

    window.innerWidth / window.innerHeight,

    0.1,

    1000

)

camera.position.z = 3

scene.background = new THREE.Color(0x808080)

const renderer = new THREE.WebGLRenderer()

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

document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)

const material = new THREE.MeshBasicMaterial()

   

const mtlLoader = new MTLLoader()

mtlLoader.load(

    'models/jacket.mtl',

    (materials) => {

        materials.preload()

        const objLoader = new OBJLoader()

        objLoader.setMaterials(materials)

        objLoader.load(

            'models/jacket.obj',

            (object) => {

               

                (object.children[0] as THREE.Mesh).material = material

                               

                function updateMaterial() {

                    material.side = Number(material.side)

                    material.needsUpdate = true

                }

               

                const gui = new GUI()

                const cubeFolder = gui.addFolder('Cube')

                               

                cubeFolder.open()

                                                                   

                const materialFolder = gui.addFolder('THREE.Material')

                materialFolder.add(material, 'transparent')

               

                materialFolder.add(material, 'opacity', 0, 1, 0.01)

                materialFolder.add(material, 'depthTest')

                materialFolder.add(material, 'depthWrite')

                materialFolder.add(material, 'alphaTest', 0, 1, 0.01)

                    .onChange(() => updateMaterial())

                materialFolder.add(material, 'visible')

                .onChange(() => updateMaterial())

                                                           

                materialFolder.open()

                scene.add(object)

            },

            (xhr) => {

                console.log((xhr.loaded / xhr.total) * 100 + '% loaded')

            },

            (error) => {

                console.log('An error happened')

            }

        )

    },

    (xhr) => {

        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')

    },

    (error) => {

        console.log('An error happened')

    }

)

window.addEventListener('resize', onWindowResize, false)

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight

    camera.updateProjectionMatrix()

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

    render()

}

const stats = Stats()

document.body.appendChild(stats.dom)

function animate() {

    requestAnimationFrame(animate)

    controls.update()

    render()

    stats.update()

}

function render() {

    renderer.render(scene, camera)

}

animate()