使用自定义着色器替代threejs后处理通道OutlinePass，模拟呼吸灯效果

threejs有多种预设的后处理通道，其中一个常用的OutlinePass，可以模拟呼吸灯效果。

但是，在项目实际使用中，发现此效果相当于添加了一层遮罩，在切换特效时，改变了光影效果。哪怕是重新调整灯光亮度，也无法恢复到原始光影效果。

客户不接受此种变化，只能另辟蹊径，使用自定义着色器。

import * as THREE from '../../build/three.module.js';
const Custom_Shader_HightLight = {


    uniforms: {
        time: {
            type: "f",
            value: 1.0
        },
        resolution: {
            type: "v2",
            value: new THREE.Vector2()
        }, 
    },
    vertexShader: `
        uniform float time; 
        varying vec3 vNormal;
        varying vec3 vPosition;
            void main() {
                //将attributes的normal通过varying赋值给了向量vNormal
            vNormal = normal;
            vPosition = position;
                //projectionMatrix是投影变换矩阵 modelViewMatrix是相机坐标系的变换矩阵
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, position.z, 1.0 );
        }`,
    fragmentShader: ` 
        uniform float time; 
        varying vec3 vNormal;
        varying vec3 vPosition;
        void main() {
            //float cy = fract((vPosition.y - 20.0) / 40.0);
            vec3 color=vec3(1.0,1.0,1.0);
            gl_FragColor = vec4(1.0*sin(time),1.0*sin(time),1.0*sin(time), 10.0*sin(time));
        }`
};
export { Custom_Shader_HightLight };

再使用着色器材质 

const height_material =  new THREE.ShaderMaterial(Custom_Shader_HightLight.Custom_Shader_HightLight);

这样，即可为物体增加呼吸灯效果。

缺陷：没有光晕的变化 ，只有亮度的变化。勉强能用吧，目前对着色器的运用水平有限。