为什么.obj-s上没有任何纹理？ （three.js所）

Question

我正在研究基于three.js的解剖学应用程序。最近我试图想象一个骨架和一个ecorche模型。我们俩都是带有.mtl文件的.obj-s，并且有jpeg文件作为纹理。我的问题是我的应用程序可视化两个模型，但在ecorche上没有纹理，骨架是黑色的。问题出在obj和mtl加载器的某个地方。我想还有一种更简单的加载模型的方法。

模型的文件位于单独的文件夹中。

我的另一个问题是如何设法制作一个按钮，将实际模型更改为另一个模型。

感谢您的帮助！

以下是代码：

if (!Detector.webgl) {
        Detector.addGetWebGLMessage();
    }
    var container;
    var camera, controls, scene, renderer;
    var lighting, ambient, keyLight, fillLight, backLight;
    var windowDivideX = window.innerWidth / 3.4;
    var files=['WorkAlpha.obj','untitled.mtl'];

    init();
    animate();

    function init() {
        container = document.createElement('viewer');
        document.body.appendChild(container);

        /*Creating Camera*/
        camera = new THREE.PerspectiveCamera(45, windowDivideX / 
        window.innerHeight, 1, 100);
        camera.position.y = 0;
        camera.position.z = 40;
        camera.position.x = 0;

        /* Scene and Lights */
        scene = new THREE.Scene();
        lighting = false;
        ambient = new THREE.AmbientLight(0xEAE1EA, 0.3);
        scene.add(ambient);
        keyLight = new THREE.DirectionalLight(0xEAE1EA, 0.6);

        //(new THREE.Color('hsl(30, 80%, 0%)'), 1.0);
        keyLight.position.set(-100, 0, 100);
        fillLight = new THREE.DirectionalLight(0xEAE1EA, 0.6);


        //(new THREE.Color('hsl(30, 80%, 0%)'), 0.6);
        fillLight.position.set(100, 0, 100);
        backLight = new THREE.DirectionalLight(0xffffff, 0.6);
        backLight.position.set(100, 0, -100).normalize();


        //ambient.intensity = 0.1;
        scene.add(keyLight);
        scene.add(fillLight);
        scene.add(backLight);


        /////////////////////////////////////////////////////////////////////////

        /* Model */

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setBaseUrl('assets/');
        mtlLoader.setPath('assets/');
        mtlLoader.load(files [0],  function (materials) {
            materials.preload();
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('assets/');
            objLoader.load('WorkAlpha.obj', function (object) {

            object.position.y = 3;object.position.x = 0;
            object.position.z = 0;
            object.name = "muscles";
            scene.add(object);
            });
        });


        mtlLoader.setBaseUrl('skeleton/');
        mtlLoader.setPath('skeleton/');
        mtlLoader.load(files[1],  function (materials) {
            materials.preload();
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('skeleton/');
            objLoader.load('untitled.obj', function (object) {

                object.position.y = -15;object.position.x = 0;
                object.position.z = 0;
                object.name = "skeleton";
                scene.add(object);
            });
        });

        /* Renderer */
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);


        renderer.setSize(windowDivideX, window.innerHeight);


        renderer.setClearColor(0xC9D2D3);
        container.appendChild(renderer.domElement);

        /* Controls */
        controls = new THREE.OrbitControls(camera, 
        renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;
        controls.maxPolarAngle = Math.PI/2;

        /* Events */
        window.addEventListener('resize', onWindowResize, false);
        window.addEventListener('keydown', onKeyboardEvent, false);
    }

    function onWindowResize() {
        camera.aspect = windowDivideX / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(windowDivideX, window.innerHeight);
        }

    function onKeyboardEvent(e) {
        if (e.code === 'KeyL') {
            lighting = !lighting;
            if (lighting) {
                ambient.intensity = 0.25;
                scene.add(keyLight);
                scene.add(fillLight);
                scene.add(backLight);
            } else {
                ambient.intensity = 1.0;
                scene.remove(keyLight);
                scene.remove(fillLight);
                scene.remove(backLight);
            }
        }
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }

在这里你可以看到HTML：

<!DOCTYPE html>
<html>
<head>

<title></title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


    <script src="three.js"></script>
    <script src="Detector.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="OBJLoader.js"></script>
    <script src="MTLLoader.js"></script>
    <script src="TrackballControls.js"></script>
    <script 
    src="https://threejs.org/examples/js/renderers/Projector.js">
    </script>
    <script 
   src="https://threejs.org/examples/js/renderers/CanvasRenderer.js">
    </script>

    <link rel="stylesheet" href="bootstrap.min.css"> 
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="design.css">

</head>
<body>
    <script src="3d.js"></script>      
</body>
</html>