用途:仅针对球状 3D 粒子可视化,适合行星、轨道、基础设施或数据地球题材。不要改动整页布局、文案或无关动效系统。
主要能力:生成密集发光点组成的球核,外加更薄的倾斜轨道环或扁平圆盘;通过层与深度混合出清晰的球体轮廓,核心保持中性或白热,环与辉光取自设计主色。使用 Three.js 自定义着色器绘制圆形粒子点,粒子保持锐利发光。
使用方式:提供 HTML 结构与 CSS(.globe-particles-shell、.globe-particles-canvas),再用 Three.js 构建几何与着色器。初始化调用:initGlobeParticles(document.querySelector("[data-globe-particles"]), { sphereCount: 2600, ringCount: 1300, accentColor: "#8b5cf6", radius: 1.35, ringRadius: 2.05, rotationSpeed: 0.12, mouseStrength: 0.08 })。可调参数包括密度(sphereCount、ringCount)、尺度(radius、ringRadius、ringThickness、cameraDistance)、颜色(coreColor 保持中性,accentColor 取自品牌主色)、运动(rotationSpeed、tiltX、tiltZ、mouseStrength、呼吸幅度)、辉光(pointSize、加法混合、粒子数)与性能(降低粒子数或限制 maxDpr)。
限制与要求:需深色背景或深色氛围容器;球体轮廓必须清晰可辨,环应倾斜有轨道感;辉光克制,避免过大粒子或泛光破坏轮廓;避免无球体结构的星场噪声、硬编码强调色、剧烈光标交互或快速旋转、浓雾导致模糊。支持 prefers-reduced-motion:减弱动效时渲染静止或近乎静止画面。需清理几何、材质、渲染器、事件监听与 requestAnimationFrame。
资料未提供安装命令、依赖版本、收费与平台信息。