求助：解析unseen.co网站的Three.js交互式粒子地球实现方案

一、用到的技术/库 #

核心就是Three.js原生API，没有依赖额外的上层特效库，关键模块如下：

• BufferGeometry：高效处理海量粒子和连线的顶点数据，是性能保障的核心
• Points + PointsMaterial（或自定义ShaderMaterial）：渲染粒子点；LineSegments + 对应材质渲染粒子间的连线
• Raycaster + OrbitControls：实现鼠标交互（旋转、缩放、选中反馈）
• GLSL自定义着色器：用来实现粒子发光、连线渐变/动态闪烁这类视觉效果
• 可选：如果基于真实地理数据生成点位，可能会用d3-geo转换坐标，但手动计算球面坐标也能实现

二、Three.js复现步骤 #

1. 搭建基础场景
   初始化Scene、PerspectiveCamera、WebGLRenderer，添加OrbitControls让用户能旋转缩放场景，开启阻尼效果提升交互手感
2. 生成球面顶点与连线数据
   • 粒子点：用球面坐标公式（x = r*sinθ*cosφ, y = r*sinθ*sinφ, z = r*cosθ）生成大量随机或按经纬度分布的顶点
   • 连线：给每个粒子设置距离阈值，将距离小于阈值的粒子对的顶点索引存入LineSegments的几何体；也可以按地理区域分组生成连线
3. 渲染粒子和连线
   • 粒子：把顶点数据传入BufferGeometry，用PointsMaterial设置大小、颜色，或者编写简单GLSL着色器实现发光、脉冲效果
   • 连线：用BufferGeometry存储连线的顶点对，用LineBasicMaterial调整透明度、颜色，或者用着色器实现连线的动态渐变效果
4. 添加交互逻辑
   用Raycaster监听鼠标事件，检测选中的粒子，触发高亮、对应连线变色这类反馈；还可以添加粒子沿球面缓慢移动的小动画，或随鼠标位置偏移的交互效果
5. 性能优化
   必须使用BufferGeometry替代旧的Geometry；开启frustumCulled剔除视窗外的粒子；粒子数量较多时使用实例化渲染；也可根据相机距离动态调整粒子密度

三、参考示例与教程 #

• Three.js官方自带示例：
  • webgl_points_sprites：掌握粒子系统的基础用法
  • webgl_lines_colors：理解线段的着色器自定义逻辑
• 社区资源：
  搜索“Three.js 粒子地球”能找到不少开发者分享的原生实现代码，大多包含交互和连线效果
• 学习重点：
  先吃透BufferGeometry和GLSL着色器的基础，再掌握球面坐标转换逻辑，这些是实现这类效果的核心

内容的提问来源于stack exchange，提问作者Uchit Chakma