three.js边缘渲染渐变虚化

### three.js 中实现边缘渲染的渐变虚化效果

为了在 three.js 中创建具有边缘渲染、渐变和虚化的效果，可以采用多种技术组合来达到理想的结果。一种常见的方法是通过后期处理(Post-processing)结合自定义着色器(Shader)，具体来说就是利用 `THREE.ShaderPass` 和 `THREE.OutlinePass` 来增强物体边界的表现。

#### 使用 OutlinePass 创建轮廓线并调整其属性

OutlinePass 是一个用于绘制对象边框的 pass，在此基础之上可以通过修改源码中的参数来自定义线条的颜色、宽度以及模糊程度等特性[^1]：

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';

// 初始化场景、相机和其他组件...
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

// 设置 Outline Pass 参数
const outlinePass = new OutlinePass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    scene,
    camera
);

outlinePass.visibleEdgeColor.set("#ff0"); // 边缘颜色设置为黄色
outlinePass.hiddenEdgeColor.set("#fff");
outlinePass.edgeGlow = 0.8;              // 增加边缘发光强度
outlinePass.edgeThickness = 0.75;         // 控制边缘厚度
outlinePass.pulsePeriod = 0;
outlinePass.usePatternTexture = false;

composer.addPass(outlinePass);            // 将 Outline Pass 添加到 Composer 中

#### 自定义着色器实现更复杂的视觉特效

如果希望进一步定制边缘效果，则可能需要编写自己的 fragment shader 或 vertex shader 。下面是一个简单的例子展示如何基于距离函数计算出不同层次透明度从而形成柔和过渡区域:

uniform float u_time;
varying vec2 vUv;

void main() {
    // 获取当前像素位置相对于屏幕中心的距离比例
    float distRatio = length((vUv - 0.5)*2.);
    
    // 应用高斯分布曲线使远离中心处逐渐变得半透明
    gl_FragColor.a *= exp(-pow(distRatio * 4., 2.) / (u_time + 1.));
}

上述片段展示了如何根据顶点坐标与视口中心之间的相对距离应用指数衰减算法改变 alpha 通道值，进而获得平滑淡入淡出的效果；其中 `u_time` 可作为时间变量控制变化速率。

最后需要注意的是，实际项目开发过程中往往还需要考虑性能优化方面的问题，比如减少不必要的重绘操作、合理配置缓存策略等等。