这是一款基于 Three.js r162 的可交互神经网络可视化模块：星空背景上悬浮着一张由上千节点构成的立体网络，节点之间用曲线相连并沿路径流光；用户可以拖拽任意旋转视角、点击画面发射能量脉冲让整片网络亮起，也可以在右上面板一键切换 4 种主题配色、通过密度滑杆把节点从 20% 稠密到 100%。切换 Formation 会重新生成不同的拓扑，Pause 冻结时间，Reset Cam 复位相机。与我们家的「量子神经网络」相比，这一款结构更接近传统神经网络的层-连接模型，主题色更冷静，更适合作为科技类产品官网首屏。

这款交互式神经网络的四个亮点

脉冲由 shader uniforms 驱动而非粒子系统：点击点被投影到相机前方的动态 Plane 上，坐标写入 `uPulsePositions`，GLSL 里用 `distance(worldPos, pulsePos)` 与波速积构造球面波前，节点自动感知波前接近程度并放大变色。
4 主题色板在文件顶部集中定义（每组 5 色），切换时不重建几何、只更新 `nodeColor` attribute 与 `uPulseColors`，切换零延迟且不掉帧。
密度滑杆并非重新采样节点，而是按连接度评分保留 top N 节点、其他丢弃并同步剪枝连接——稀疏时保留骨干节点，网络不会散架成孤岛。
后处理走 `EffectComposer` + `RenderPass` + `UnrealBloomPass` + `OutputPass` 标准四件套，可以直接把 bloom 强度从 1.8 降到 1.0 得到更克制的画面。

神经网络可视化的三个技术取舍

其一，网络的连接线不是直线也不是完全曲线，而是「中点 + 垂直方向 sin 偏移」的近似贝塞尔，再叠加低频 simplex 噪声轻微漂浮，比一根根直线更像神经突触。其二，节点用 `THREE.Points` + `ShaderMaterial` 而非 Mesh 阵列，`gl_PointSize` 按 `1000.0 / -mvPosition.z` 做透视缩放，节点数量上千也能在中端笔电流畅跑。其三，OrbitControls 默认开启 `autoRotate: true`，autoRotateSpeed 0.2 相当于每分钟转 12°；用户手动拖拽后 2.5 秒自动恢复自转，避免长时间放置画面凝固。

要变成自己的品牌色需要做什么

4 组主题在 `colorPalettes` 数组，每组是 5 个 `THREE.Color`。改成品牌色即可全局生效；如果只需要一种主题，把面板 HTML 里其他 `.theme-button` 删掉即可。想让脉冲更慢或更快，改 shader uniforms 里 `uPulseSpeed`（默认 18）；想让画面更冷，把 `FogExp2` 的密度从 0.002 提到 0.004，远处淡出更明显。GLSL 源码中均有注释，可对照 vertex/fragment shader 修改。

浏览器需支持 WebGL2：Chrome 90+、Safari 15+、Edge 90+、Firefox 88+；手机端建议把 `renderer.setPixelRatio` 上限降到 1、密度默认值调到 60% 以下。详细运行方法请参见压缩包内的帮助文档。

常见问题

为什么密度调到最低还是有点卡

密度只减节点数量，bloom 后处理开销仍在。把 `bloomPass` 的分辨率参数改成 `window.innerWidth/2, window.innerHeight/2`，或干脆去掉 `bloomPass` 换成裸渲染，性能立竿见影。

能加入自己的 Formation 拓扑吗

可以。仿照 `generateCrystallineSphere` 写一个新函数并加入 switch 分支，同步把 `numFormations` 加 1。节点只需要坐标和 `connections` 数组即可参与后续渲染。

脉冲能不能只在点击特定按钮时触发

能。把 canvas 上的 click 监听删掉，改到某个按钮的 onClick 里手动构造一个 `interactionPoint` 传给 `triggerPulse` 即可。

SEO 会不会因为 canvas 里的内容抓不到而受影响

会。canvas 内容对搜索引擎不可见，建议在 canvas 同级放一段介绍性文字或 h1，或使用 SSR 输出静态兜底内容。

适合放在哪些页面

适合 AI 平台、算力/云服务、科技公司官网首屏、招聘页 Banner、行业峰会主视觉、CES/GTC 展台大屏。下载源码后可作为独立背景模块或全屏首屏使用。