javascript - Three.js 加载第二个对象后材质消失

Question

我将 Three.js 与 OBJLoader 和 MTLLoader 一起使用，当我在场景中只有一个对象时，一切工作正常，但是一旦我在第一个对象上添加第二个材质部分，就会变成白色。

我在这里上传了 .obj 和 .mtl 文件： https ://drive.google.com/drive/folders/1_nHGr9EzrdOMCwBSYwAluRW1fYh8R8g_?usp=sharing

我的Javascript代码：

const scene = new THREE.Scene();
        const light = new THREE.AmbientLight(0xffffff);
        scene.add(light);

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

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xddffdd, 1);
        document.body.appendChild(renderer.domElement);

        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 7;
        controls.target.set(1, 1, 1);

        const objLoader = new THREE.OBJLoader();
        const mtlLoader = new THREE.MTLLoader();

        function loadObject(fileName, x, y, z) {
            mtlLoader.load("blender-files/" + fileName + ".mtl", (materials) => {
                materials.preload();
                objLoader.setMaterials(materials);
                objLoader.load("blender-files/" + fileName + ".obj", (object) => {
                    object.scale.set(40, 40, 40);
                    object.position.set(x, y, z);
                    scene.add(object);
                })
            })
        }

        //this becomes white when the second object is loaded
        loadObject("CornerBOW", 0, 0, 2);
        loadObject("CornerGRY", 2, 2, 0);
        render();

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