three.js 物体轮廓高亮

背景：物体在鼠标移上去时有一个高亮的交互；在状态为异常时轮廓高亮并闪烁

方案：

​ 使用

1. EffectComposer: 效果组合器
2. RenderPass: 在指定的场景和相机的基础上渲染出一个新场景
3. OutlinePass: -物体边界线条
4. ShaderPass: 使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道
5. FXAAShader: 着色器主要功能是解决锯齿问题

    import './EffectComposer'
    import './OutlinePass'
    import './RenderPass'
    import './ShaderPass'
    import './FXAAShader'



	//轮廓高亮显示
    composer = new THREE.EffectComposer(renderer);
    renderPass = new THREE.RenderPass(scene, camera);
    composer.addPass(renderPass);
    outlinePass = new THREE.OutlinePass(new THREE.Vector2(width, height), scene, camera);
    outlinePass.edgeStrength = 5; //包围线浓度
    outlinePass.edgeGlow = 0; //边缘线范围
    outlinePass.edgeThickness = 2; //边缘线浓度
    outlinePass.pulsePeriod = 1; //包围线闪烁频率
    outlinePass.visibleEdgeColor.set('green'); //包围线颜色
    outlinePass.hiddenEdgeColor.set('green'); //被遮挡的边界线颜色
    composer.addPass(outlinePass);
    let effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
    effectFXAA.uniforms['resolution'].value.set(1 / width, 1 / height);
    effectFXAA.renderToScreen = true;
    composer.addPass(effectFXAA);