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

结果:

- Brother Eye

---

我有同样的问题，即使添加了光源，无论是环境光、聚光灯还是点光源。 - timsa7

Answer 1

在 Brother Eye 的回答之上，我是一个全新的人，并且在黑暗中花费了相当多的时间，但这让我找到了解决方法，所以我想为处于同样位置的任何人详细说明。

添加一个灯光可以像下面这样简单：

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

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

- Matt Scott

Answer 2

造成这个问题的原因是光线不足，而不是材料的问题。在场景中添加环境光后，物体可以正常显示。

- Brother Eye