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

Question

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

这是我的代码：

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

添加眼睛兄弟的答案，我是全新的，并且在黑暗中花了很多时间，但这让我找到了解决方案，所以我想我会为处于相同位置的任何人详细说明。

添加灯光可以简单如下：

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

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