1

I'm trying to make my 3d models appear a little 'nicer' - by which I mean less jagged looking edges, more realistic looking shadows etc.

at the moment I'm testing with an OBJ file. My code for loading and displaying the file is as follows:

function LoadOBJMTL(file) {

var objObject = new THREE.Object3D;
var loader = new THREE.OBJMTLLoader();
var objfile = file + ".obj";
var mtlfile = file + ".mtl";

loader.load(objfile, mtlfile, function(object) {
    
    objObject = object;
    scene.add(objObject);

});

}

Nothing special there...

and my code for illuminating the scene is just 5 directional lights as follows:

addDirectionLight([-1, 0, 0], 1);
addDirectionLight([1, 0, 0], 1);
addDirectionLight([0, 0, -1], 1);
addDirectionLight([0, 0, 1], 1);
addDirectionLight([0, 1, 0], 1);

function addDirectionLight(direction, intensity) {
    var directionalLight = new THREE.DirectionalLight(0xffffff, intensity);
    directionalLight.position.set(direction[0], direction[1], direction[2]);
    scene.add(directionalLight);
}

And this is what my results look like: enter image description here

As a comparison, I have uploaded the same model to verold and sketchfab

Not sure about sketchfab, but I know that verold is written with three.js

Verold trial: enter image description here

Sketchfab trial: enter image description here

I'm happy with the apperance in both the verold and sketchfab examples. What techniques should I use to improve the look of my threejs model? I'm after straighter looking lines, and better lighting conditions.

thanks in advance

Community
  • 1
  • 1
Adrian Taylor
  • 544
  • 1
  • 5
  • 14
  • This might help http://stackoverflow.com/questions/17224795/antialiasing-not-working-in-three-js – Bob Apr 15 '15 at 06:24

1 Answers1

1

fix jagged edges: 

renderer = new THREE.WebGLRenderer({ antialias: true });

Hard to comment on lighting. There are many general 3d lighting setup tutorials around.

2pha
  • 9,798
  • 2
  • 29
  • 43