three.js - Model showing with blank (black) texture despite material loaded

user_4893880 0
Viewed 2347

I have a 3D model file 3dbaotang.obj and a material file 3dbaotang.mtl. I've loaded both of them using three.js OBJLoader and MTLLoader. The model has shown up, but not the material, as it's solely covered with black. Can anyone help?

Here is my code:

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

Result: result

three.js 3d
2 Answers

Adding to Brother Eye's answer, I'm brand new and and spent quite a lot of time in the dark but this got me on to the solution so I thought I'd elaborate for anyone in the same position.

Adding a light can be some simply as follows;

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

The reference docs are located at https://threejs.org/docs/#api/en/lights/AmbientLight

user_23119180

It was the lack of light that caused this problem, not the material. After adding ambient light to the scene, the object can be seen normally

user_48938800
Related