three。js抗锯齿怎么设置

在three.js中，可以通过设置renderer对象的属性来实现抗锯齿效果。

1.使用FXAA抗锯齿：

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
renderer.autoClear = false;
var composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.addPass(effectFXAA);
effectFXAA.renderToScreen = true;

2.MSAA抗锯齿：

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
renderer.autoClear = false;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.antialias = true;
renderer.localClippingEnabled = true;
renderer.physicallyCorrectLights = true;
renderer.toneMappingExposure = 1.0;
renderer.toneMappingWhitePoint = 1.0;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMapping = THREE.CineonToneMapping;
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMapping = THREE.NoToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
var renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
var composer = new THREE.EffectComposer(renderer, renderTarget);
composer.setSize(window.innerWidth, window.innerHeight);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.addPass(effectFXAA);
effectFXAA.renderToScreen = true;

使用MSAA抗锯齿需要注意的是，需要在定义renderer时，将antialias设置为true，才能生效。