Three.jsでアンチエイリアスを有効にする

Three.jsで描画したオブジェクトの線がギザギザしている場合の対応として、アンチエイリアスの設定を試してみます。

サンプルコード

まずは設定前の例です。

import * as THREE from 'three';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("white");
document.body.appendChild(renderer.domElement);

// ライトの作成
const directionalLight = new THREE.DirectionalLight();
directionalLight.position.set(0, 0, 10);
scene.add(directionalLight);

// オブジェクトの作成
const geometry = new THREE.DodecahedronGeometry(5);
const material = new THREE.MeshStandardMaterial({
  color: "purple"
});
const object = new THREE.Mesh(geometry, material);
scene.add(object);

renderer.render(scene, camera);

後述の設定後と比べるとわかりやすいですが、オブジェクトの線が少しギザギザした状態で描画されています。
アンチエイリアス設定前のデモページ

次にアンチエイリアスを有効にしてみます。

import * as THREE from 'three';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("white");
document.body.appendChild(renderer.domElement);

// ライトの作成
const directionalLight = new THREE.DirectionalLight();
directionalLight.position.set(0, 0, 10);
scene.add(directionalLight);

// オブジェクトの作成
const geometry = new THREE.DodecahedronGeometry(5);
const material = new THREE.MeshStandardMaterial({
  color: "purple"
});
const object = new THREE.Mesh(geometry, material);
scene.add(object);

renderer.render(scene, camera);

これで線が滑らかに描画されました。
アンチエイリアス設定後のデモページ