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

Question

在加载 MTL 文件时，整个模型都变黑了。我已经引用了这个链接并将 rbg 参数设置为 1 但这并没有解决我的问题。
three.js mtl loader renders black
这是与之相关的代码:

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();

这是代码笔的链接:
https://codepen.io/FarhaNaseem/pen/gOmwbYj?editors=0010
我期待的是这个输出:

Answer 1

MTL 将纹理加载为 TIFF 图像，该图像不能用作图像数据源。请改用 JPG 或 PNG。
旁注:您会注意到对象的 Material 具有分配给 map 的纹理。属性，但带有 undefined image值(value)。在这种情况下，纹理显示为黑色。