Three.js锯齿(使用EffectComposer后处理)

在没有使用EffectComposer后处理的时候关于渲染器的锯齿问题，可以参考本站文章“Three.js 锯齿”

FXAAShader着色器通道设置

引入着色器文件FXAAShader.js,目录位置/examples/js/shaders/FXAAShader.js,该着色器主要功能是解决锯齿问题。

<script src="./examples/js/postprocessing/EffectComposer.js"></script>
<!-- EffectComposer依赖RenderPass.js、ShaderPass.js、CopyShader.js库 -->
...
<script src="/examples/js/shaders/FXAAShader.js"></script>

通过ShaderPass构造函数把FXAAShader着色器和uniforms构成的对象作为参数，创建一个锯齿通道FXAAShaderPass,然后把锯齿通道插入到composer中。

// 渲染区域Canvas画布宽高度  不一定是全屏，也可以是区域值
var width = window.innerWidth; //全屏状态对应窗口宽度
var height = window.innerHeight; //全屏状态对应窗口高度
...
var composer = new THREE.EffectComposer(renderer);
...
// 去掉锯齿
var FXAAShaderPass = new THREE.ShaderPass(THREE.FXAAShader);
FXAAShaderPass.uniforms['resolution'].value.set(1 / width, 1 / height);
FXAAShaderPass.renderToScreen = true;
composer.addPass(FXAAShaderPass);
...
function render() {
  composer.render();
  requestAnimationFrame(render);
}

如果渲染区域不是全屏，canvas画布有具体的尺寸

// 渲染区域Canvas画布宽高度  不一定是全屏，也可以是区域值
var width = 800; //非全屏状态对应窗口宽度
var height = 600; //非全屏状态对应窗口高度
...
FXAAShaderPass.uniforms['resolution'].value.set(1 / width, 1 / height);
F