Image distortion in threejs

Question

I am drawing 3D shape using threejs. I have use MeshLambertMaterial to draw this shape but image is not showing properly.

How to solve this issue?

Answer 1

I believe you are experiencing just plain old line/edge aliasing - a problem that has been around with us since the late 1970's. The artifact is nicknamed 'jaggies'. Three.js's WebGLRenderer should help with that when you set antialias: true, but if it absolutely will not work in Chrome, the only solution is to do sub-pixel rendering. Adding the following line alleviates the problem, but with an obvious performance cost:

renderer.setPixelRatio( 2.0 );

Here's a JSFiddle: https://jsfiddle.net/jtgvzsbo/

The above sets the renderer to render twice as many pixels as the device screen resolution. You have to be the one to decide on line quality, or framerate. It is a constant balancing act. If the user will not see this exact angle of the cube all the time, then I would not worry about the jaggies and go for smooth framerate. If they will be constantly looking at this slightly rotated cube and will stay in front of it (maybe it serves as a constant backdrop?), then maybe opt for visual quality. Hope this helps!