使用 ThreeJs 渲染的形状具有不稳定/模糊的边缘

Question

我正在尝试使用基本的盒子几何图形在 ThreeJs 中渲染这个立方体，但线条很奇怪且不稳定。即使我将线框设置为 false 并放置一个实心立方体，立方体的边缘仍然保持这样。

我正在使用 WebGlRenderer 和立方体几何体。

    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);

Answer 1

您必须启用抗锯齿：

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