问题遇到的现象和发生背景
使用Three.js中的【MTLLoader】与【OBJLoader】加载两个三维模型时，第一个加载的模型会丢失材质。
用代码块功能插入代码，请勿粘贴截图
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个three.js文件_WebGL三维场景</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="../../three.js-master/build/three.js"></script>
<script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script>
<script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>
<script src="../../three.js-master/examples/js/loaders/MTLLoader.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
//加载地球模型
var OBJLoader = new THREE.OBJLoader();
var MTLLoader = new THREE.MTLLoader();
MTLLoader.load('./贴图/material.mtl', function(materials) {
OBJLoader.setMaterials(materials);
OBJLoader.load('./贴图/model.obj', function(obj) {
scene.add(obj);
})
});
//加载任务模型
MTLLoader.load('./female02/female02.mtl', function(materials) {
OBJLoader.setMaterials(materials);
OBJLoader.load('./female02/female02.obj', function(obj) {
obj.position.set(100,0,100);
scene.add(obj);
})
})
//添加灯光
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);
var ambient = new THREE.AmbientLight(0x888888);
scene.add(ambient);
//添加相机
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 150;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
//添加渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
//渲染函数
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
var controls = new THREE.OrbitControls(camera);
</script>
</body>
</html>
```
运行结果及报错内容
如上述代码，运行后地球模型材质丢失了，只有人物模型材质还在。
我的解答思路和尝试过的方法
当我把人物模型加载代码去除后，地球的材质可以成功显示，如下图对比所示：
我想要达到的结果
请问各位大神，如何在Three.js中加载多个obj模型，并成功显示所有模型的材质？感谢！
