这是一款基于Three.js、原生 JavaScript 与 CSS技术实现的带粒子地球的四位验证码 OTP 输入组件。黑色卡片上方是一颗旋转地球，下方四个槽位接收数字。输入时焦点随位置推进，删除和粘贴也有对应处理；演示码为 2026，匹配后显示勾选与过渡动画。地球与输入反馈共同构成验证主题的视觉入口。
粒子地球验证码怎样反馈输入过程
地球持续呈现空间层次。黑白点面与旋转运动让小型卡片也有立体焦点。
输入与槽位分离。真实输入框负责键盘事件，四个可视槽位负责数字、光标与状态动画。
成功状态有完整收尾。校验通过后统一改变槽位和提示，避免用户继续把输入误当成未完成。
四位槽位与真实输入框如何配合
组件维护当前槽位、焦点和动画状态，并将其映射到各个可视格。输入状态与成功动画分开管理，减少连续键入时的冲突。地球渲染使用独立画布，表单本身依然是普通 DOM，可以按页面需要拆开使用。
const count = state.slots.filter(Boolean).length;
验证码位数、演示码和卡片样式在哪里修改
中文说明和槽位结构在 index.html，演示码判断、输入行为与三维绘制在 script.js，卡片尺寸、光标和反馈外观在 style.css。接真实验证服务时，应替换本地演示判断，并补充请求中、失败重试与过期状态。
地球验证码的验证服务与兼容问题
它会真的发送邮件验证码吗？
不会。页面展示的是固定演示码的前端交互，没有邮件服务或服务端验证。
地球画面不出现怎么办？
请检查 WebGL 支持和图形加速是否可用，三维依赖已本地保存；输入组件的结构和三维画布相互独立。
可以改成六位码吗？
需要同步修改槽位数量、输入长度、状态计算和布局，不能只改 maxlength。
适合身份验证原型、账户入口和粒子地球主题界面。下载后可查看地球验证码的完整结构与参数，按自己的内容继续调整。
