CODEWITHSUNDEEP
javascriptthree.jsgltf
zed87
zed87

Reputation: 437

Three.js | Imported Blender model is like it's rendered in low quality

I imported in my Three.js project a gltf model exported from Blender.

I know the model is correct and it is perfectly rendered in https://gltf-viewer.donmccurdy.com/.

But in my Three.js project it seems to have a worse quality as you can see from these screenshots:

https://ibb.co/qrqX8dF (donmccurdy viewer)

https://ibb.co/71wLDLJ (my project)

I dont know if this can be a problem of lighting or some setting in the renderer object.

This is my renderer and light settings:

// renderer
var renderer= new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor (0xf9f9f9, 1);
renderer.gammaOutput= true;
renderer.antialias= true;
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// light
var directionalLight= new THREE.DirectionalLight(0xffffff, 0.9);
scene.add(directionalLight);

Any help will be appreciated.

Upvotes: 2

Views: 658

Answers (1)

Mugen87
Mugen87

Reputation: 31026

renderer.antialias= true;

It's not valid to set the antialias parameter like this. All WebGL rendering context parameters must be applied to the constructor. Do it like so

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

Upvotes: 3

Related Questions