Javascript 加载mtl文件时3D对象变黑

加载MTL文件时，整个模型将变为黑色。我参考了这个链接并将rbg参数设置为1，但这并没有解决我的问题

以下是与其关联的代码：

var scene = new THREE.Scene();
scene.background = new THREE.Color('0xf1f1f1');

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

const canvas = document.querySelector('#scene1');

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5,5,5);
scene.add(camera);

var renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls(camera, renderer.domElement);
//controls.autoRotate = true;
//controls.autoRotateSpeed = 5;
controls.enableZoom = true;

var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);

var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(20, 20, 20);

var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(20, 20, -20).normalize();

var ambientLight = new THREE.AmbientLight();

var pointLight = new THREE.PointLight(0xffffff,1,100);
pointLight.position.set(20,20,20);

var pointLight2 = new THREE.PointLight(0xffffff,0.5,100);
pointLight2.position.set(20,-20,20);

var pointLight3 = new THREE.PointLight(0xffffff,0.5,100);
pointLight3.position.set(-20,20,-20);

var pointLight4 = new THREE.PointLight(0xffffff,0.5,100);
pointLight4.position.set(-20,-20,-20);

//scene.add(ambientLight);
scene.add(pointLight);
scene.add(pointLight2);
scene.add(pointLight3);
scene.add(pointLight4);


//scene.add(keyLight);
//scene.add(fillLight);
//scene.add(backLight);

var mtlLoader = new THREE.MTLLoader();
//mtlLoader.setTexturePath('https://i.ibb.co/n1vnyP6/piper-diffuse.jpg');
mtlLoader.setPath('https://raw.githubusercontent.com/fnaseem/3dModelTest/tc/Test/');
mtlLoader.load('soccer_ball.mtl',function(material){
  material.preload();
  var objLoader = new THREE.OBJLoader();
   objLoader.setMaterials(material);
   objLoader.load('https://raw.githubusercontent.com/fnaseem/3dModelTest/tc/Test/soccer_ball.obj', function(object){
   object.position.set(0,0,0);
   console.log(object.children[0].material.color);
   object.children[0].material.color.r = 1;
object.children[0].material.color.g = 1;
object.children[0].material.color.b = 1;
    console.log(object.children[0].material.color);
   scene.add(object);
 //renderer.render(scene, camera);
});
   });

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

animate();

以下是代码笔的链接：

我期望的是这个输出：

---

MTL将纹理加载为TIFF图像，该图像不能用作图像数据源。改用JPG或PNG

---

旁注：您会注意到对象的材质具有指定给

贴图

属性的纹理，但具有

未定义

图像值。在这种情况下，纹理显示为黑色。

感谢您帮助解决此问题并提供提示！