three.js-尽管加载了材料，模型仍显示空白（黑色）纹理

Question

我有一个3D模型文件3dbaotang.obj和一个材质文件3dbaotang.mtl。我已经使用three.js OBJLoader和MTLLoader加载了它们。该模型已显示，但没有显示材料，因为它仅被黑色覆盖。有人可以帮忙吗？

这是我的代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / 
window.innerHeight, 0.1, 10000);
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var keyLight = new THREE.DirectionalLight('hsl(30, 100%, 75%)', 1.0);
var fillLight = new THREE.DirectionalLight('hsl(240, 100%, 75%)', 0.75);
var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
keyLight.position.set(-100, 0, 100);
fillLight.position.set(100, 0, 100);

controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.update();

renderer.setSize(window.innerWidth, window.innerHeight, false);
renderer.setClearColor(new THREE.Color(0xf2f2f2), 1);
document.body.appendChild(renderer.domElement);

// LOAD MODEL
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setResourcePath('/models/');
mtlLoader.setPath('/models/');
mtlLoader.load('/3dbaotang.mtl', (materials) => {
    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('/models/');
    objLoader.load('3dbaotang.obj', (object) => {
        scene.add(object);
    });
});

camera.position.z = 200;

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

animate();

结果：

Answer 1

造成此问题的原因不是光，不是材料。将ambient light添加到场景后，可以正常看到对象

Answer 2

除了Brother Eye的答案之外，我是全新的，并且在黑暗中度过了很多时间，但这使我进入了解决方案，所以我认为我会为处于同一位置的任何人提供详尽的说明。 >

添加灯光可以简单地如下：

//Add light
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);

参考文档位于https://threejs.org/docs/#api/en/lights/AmbientLight