three.js mtl loader renders black

Question

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 in my last project and it works, but it doesn't in my current project. When I remove the materials the lighting affects it, but when I add it, it is pitch black. The renderer renders continously. Also, there are no errors in the console.

Here is the code used in my current project: (MaterialLoader is an MTLLoader instance and ObjectLoader is an OBJLoader instance)

MaterialLoader.load("bbb/bbb.mtl",
            function(materials) {
                materials.preload()
                    ObjectLoader.setMaterials(materials)
                ObjectLoader.load("bbb.obj",
                    function(model) {
                        let mesh = model.children[0]
                        scene.add(mesh)
                    }, null, function(error) {alert(error)}
                )
            }, null, function(error) {alert(error)}
        )

Here is the code from my previous project (the loader variable is an OBJLoader instance, and the materials load successfully here.)

mtlLoader.load(
            "bbb.mtl",
            function(materials) {
                materials.preload()
                loader.setMaterials(materials)
                loader.load("bbb.obj",
                    function(obj) {
                        level = obj.children[0]
                        scene.add(level)
                    }, null,
                    function(error) { alert(error) }
                )
            }, null,
            function(error) { alert(error) }
        )

captwebdesign captwebdesign · Accepted Answer · 2018-08-07T05:20:49

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

three.js mtl loader renders black

2 Answers