three.jsで読み込んだobjに対して、dat.guiを使ってテクスチャを切り替えれるようにしたい

前提・実現したいこと

発生している問題・エラーメッセージ

OBJLoaderとMTLLoaderを使って、モデルを読み込むところまではできました。
最終的にdat.guiのセレクトボックスで複数のテクスチャを切り替えて表示できるようにしたいです。

該当のソースコード

<!DOCTYPE html>

<html>

<head>
    <title>test</title>
    <script type="text/javascript" src="./three/three.js"></script>
    <script type="text/javascript" src="./loaders/OBJLoader.js"></script>
    <script type="text/javascript" src="./loaders/MTLLoader.js"></script>

    <script type="text/javascript" src="./three/stats.min.js"></script>
    <script type="text/javascript" src="./three/dat.gui.min.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    
    function init() {

        var stats = initStats();

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

        //camera
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        //renderer
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xaaaaff));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMap.enabled = true;
        
        //planeの作成
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        //planeをシーンに追加
        scene.add(plane);
        

        //カメラの位置
        camera.position.x = 0;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(0, 10, 0));


        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(0, 40, 30);
        spotLight.intensity = 2;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial


        };

        var gui = new dat.GUI();
        var mesh;

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath("./assets/");
        mtlLoader.load('sample.mtl', function(materials) {
            materials.preload();

            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath("./assets/");
            objLoader.load('sample.obj', function(object) {


              object.scale.set(70, 70, 70);
              mesh = object;
              scene.add(mesh);
                
              mesh.rotation.x = 10;
              mesh.rotation.y = 0;
              mesh.rotation.z = 10;

              
            });
        });


        render();


        function render() {
            stats.update();

            
            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms


            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>