OBJ Loader - Poor Resolution

Hi there,

We are working with a developer to build a custom site for us.

We are using three.js to load .obj models into the site.

The problem is the models are appearing pixelated. Is there a way to increase the resolution?

Here is a link to show how the .obj file is loading:

Please notice the edges of the model.

Here is a link to the same .obj file loaded with google poly and three.js

The resolution is much better in this model.

We would appreciate any help!

Create your instance of WebGLRenderer like this:

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

Now you activate anti-aliasing and also achieve higher resolutions on HiDPI or Retina displays.

1 Like

I’m not sure what you mean, do you mean the missing antialiasing or the texture just being not repeated?

I’m guessing antialiasing?

Oh ok, it’s just both examples don’t have antialiasing, since he said the second example would be better.

Ha, maybe they meant both?

The only difference i see in both is that the first doesn’t has repeated textures, instead the clamped edges what might be misinterpreted for a poor resolution.

1 Like


This is what we are referring to.


What @Mugen87 wrote

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