three.js obj and mtl file renders black with shadows

Question

I am trying to load the 3dsmax .obj and .mtl file in browser using three.js.

I am using this tutorial and code..

The obj model is loading successfully but it looks dark and not the way it should be.

what should i do so there is no black spots in the object.

How should i add lights from all sides?

Here's the script -

<script>

    var lesson6 = {
     scene: null,
     camera: null,
      renderer: null,
     container: null,
    controls: null,
    clock: null,
   stats: null,

   init: function() { // Initialization

// create main scene
this.scene = new THREE.Scene();
this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);

var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;

// prepare camera
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 2000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(0, 100, 300);
this.camera.lookAt(new THREE.Vector3(0,0,0));

// prepare renderer
this.renderer = new THREE.WebGLRenderer({ antialias:true });
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(this.scene.fog.color);
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;

// prepare container
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);

// events
THREEx.WindowResize(this.renderer, this.camera);

// prepare controls (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
this.controls.maxDistance = 2000;

// prepare clock
this.clock = new THREE.Clock();

// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.left = '50px';
this.stats.domElement.style.bottom = '50px';
this.stats.domElement.style.zIndex = 1;
this.container.appendChild( this.stats.domElement );

// add spot light
  var spLight = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI / 3);

spLight.castShadow = true;

spLight.position.set(-200, 500, -150);

this.scene.add(spLight);



// add simple ground
var ground = new THREE.Mesh( new THREE.PlaneGeometry(200, 200, 10, 10), new      THREE.MeshLambertMaterial({color:0x999999}) );
 ground.receiveShadow = true;
 ground.position.set(0, 0, 0);
  ground.rotation.x = -Math.PI / 2;
this.scene.add(ground);

   // load a model
   this.loadModel();
  },
   loadModel: function() {
 // prepare loader and load the model
  var oLoader = new THREE.OBJMTLLoader();
  oLoader.load('1.obj', '1.mtl', function(object) {

 object.position.x = 80;
 object.position.y = 0;
 object.position.z = 30;
 object.scale.set(10,10,10);
  lesson6.scene.add(object);
  });
  }
 };

 // Animate the scene
 function animate() {
  requestAnimationFrame(animate);
 render();
 update();
 }

// Update controls and stats
function update() {
 lesson6.controls.update(lesson6.clock.getDelta());
 lesson6.stats.update();
 }

// Render the scene
 function render() {
if (lesson6.renderer) {
 lesson6.renderer.render(lesson6.scene, lesson6.camera);
}
}

// Initialize lesson on page load
function initializeLesson() {
 lesson6.init();
 animate();
}

 if (window.addEventListener)
window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
  window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;

</script>

Default obj and mtl file preview- [![enter image description here][2]][2]

Safal Pillai Safal Pillai · Accepted Answer · 2016-09-19T05:07:51

Refer: three.js load obj/mtl renders black

OBJMTLLoader has been removed since r74. You should use MTLLoader and OBJLoader.

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('obj/');
mtlLoader.load('1.mtl', function(materials){
    materials.preload();
    //OBJ LOADER
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('obj/');
    objLoader.load('1.obj', function(object){
        objModel = object;
        scene.add(objModel);
    });
});

Also try adding ambient light to the scene to check whether the materials have been loaded properly.

var ambientLight = new THREE.AmbientLight('#fff');
scene.add(ambientLight);

three.js obj and mtl file renders black with shadows

1 Answers