Three.js Mtl Loader Renders Black

I am trying to add a level .obj for my program but it renders black. The .mtl file requires several images placed everywhere (not one space is non-textured). I used to same object

Solution 1:

Your code works when tested! Maybe it's an issue with the material export, uv unwrapping, the texture's path, do you have lighting added to the scene, etc. Here's my test code:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,320/240,1,500);
camera.position.set( 0,2,2 );
camera.lookAt( scene.position );
var lightIntensity = 1;
var lightDistance = 10;
var light = new THREE.AmbientLight( 0xFFFFFF, lightIntensity, lightDistance );
light.position.set( 0, 5, 0 );
scene.add( light );
var grid = new THREE.GridHelper(10,10);
scene.add( grid );
var renderer = new THREE.WebGLRenderer({});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 320,240 );
renderer.domElement.style.margin = '0 auto';
renderer.domElement.style.display = 'block';
renderer.domElement.style.backgroundColor = '#dddddd';
$(document.body).append(renderer.domElement);
function update(){
  renderer.render( scene, camera );
  requestAnimationFrame( update );
}
update();
mtl_loader = new THREE.MTLLoader();
mtl_loader.load("assets/doughnut.mtl",
    function(materials) {
        materials.preload()
            var obj_loader = new THREE.OBJLoader();
            obj_loader.setMaterials(materials)
            obj_loader.load("assets/doughnut.obj",
            function(object) {
                let mesh = object.children[0]
                scene.add(mesh);
            }, null, function(error) {alert(error)}
        )
    }, null, function(error) {alert(error)}
);

Solution 2:

https://discourse.threejs.org/t/objloader-mtlloader-not-loading-texture-image/2534 try change object material color, like this:

model.children[0].material.color.r = 1;
model.children[0].material.color.g = 1;
model.children[0].material.color.b = 1;

its work for me