threejs glow局部发光效果得代码

要在Three.js中实现局部发光效果，可以使用ShaderMaterial和glow效果。下面是实现的步骤：

1. 创建一个 ShaderMaterial 来定义发光效果的外观。

const glowMaterial = new THREE.ShaderMaterial({
  uniforms: {
    "c": { type: "f", value: 1.0 },
    "p": { type: "f", value: 1.4 },
    glowColor: { type: "c", value: new THREE.Color(0xffffff) },
    viewVector: { type: "v3", value: camera.position }
  },
  vertexShader: document.getElementById('vertexShader').textContent,
  fragmentShader: document.getElementById('fragmentShader').textContent,
  side: THREE.FrontSide,
  blending: THREE.AdditiveBlending,
  transparent: true
});

其中，uniforms定义了一些需要在shader中使用的变量，vertexShader和fragmentShader分别是顶点着色器和片元着色器的代码。这些代码可以写在HTML中，也可以写在外部文件里。

2. 创建一个 Mesh 来应用材质。

const mesh = new THREE.Mesh(geometry, glowMaterial);
scene.add(mesh);

3. 编写顶点着色器和片元着色器代码。

// vertexShader
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;

void main() {
  vec3 vNormal = normalize( normalMatrix * normal );
  vec3 vNormel = normalize( normalMatrix * viewVector );
  intensity = pow( c - dot(vNormal, vNormel), p );
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

// fragmentShader
uniform vec3 glowColor;
varying float intensity;

void main() {
  vec3 glow = glowColor * intensity;
  gl_FragColor = vec4( glow, 1.0 );
}

这里的顶点着色器使用了法线和视图向量来计算发光强度，片元着色器则定义了发光的颜色。

4. 将 ShaderMaterial 和 shader 代码添加到HTML中。

<script type="x-shader/x-vertex" id="vertexShader">
  // 顶点着色器代码
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
  // 片元着色器代码
</script>

完整的代码实现和例子可以参考以下链接：

- https://threejs.org/examples/webgl_postprocessing_glow.html
- https://threejs.org/examples/webgl_shader_glow.html