EN VI

Javascript - Shapes rendered using ThreeJs have shaky/hazy edges?

2024-03-10 18:00:07
How to Javascript - Shapes rendered using ThreeJs have shaky/hazy edges

I am trying to render this cube in ThreeJs using basic Box Geometry but the lines are weird and shaky. Even if I set wireframe to false and put a solid cube, the edges of the cube still remain like this.

cube

I am using WebGlRenderer and box geometry for the cube.

    const renderer = new THREE.WebGLRenderer();
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    const boxGeo = new THREE.BoxGeometry(2, 2, 2);
    const boxMat = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      wireframe: true,
    });
    const boxMesh = new THREE.Mesh(boxGeo, boxMat);
    scene.add(boxMesh);

Solution:

You have to enable Anti-aliasing (see WebGLRenderer):

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

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login