基于 Three.js 实现的一只清新配色的 3D 邮箱，蓝白箱体、圆角挡板、侧面一根可翻起的红色信号旗，背景是薄荷绿到淡紫的渐变天空。一张白色信封悬在半空，跟着你的鼠标缓缓漂移，还会随移动方向轻微侧倾。当鼠标移到邮箱上时光标变成手型，点一下，信封就自己飞过去、转平、缩着塞进投信口；紧接着信号旗“啪”地弹起来，邮箱被震得抖了两下；三秒后一切复位，可以再投一次。

整只邮箱和信封都是用代码建出来的——箱体是二维轮廓做拉伸挤出，圆角挡板用 Shape 的二次贝塞尔画出来再取面，边缘那圈淡淡的描线是几何体边线叠加上去的。所以没有任何模型文件要加载，颜色、比例、圆角都能直接改数值。

这套 3D 邮箱交互里藏着的四个设计

鼠标跟随不是贴屏幕坐标，而是投到 3D 平面上。脚本从相机发一条射线，与一个垂直于视线方向的虚拟平面求交，得到信封该去的世界坐标，再做限位。所以信封是真的在三维空间里漂，透视关系正确。
点击判定用射线拾取真实网格。可点击对象被单独收进一个数组（箱体、腰带、投信口框、口盖、旗杆、旗面），鼠标经过时实时求交切换光标样式，点中才触发投递。
整段投递是一台状态机。跟随、投递中、升旗、已送达四个状态串成一条线，每个阶段有各自的时长与缓动，互不干扰，也就不会出现“投一半又被鼠标拽走”的穿帮。
信号旗弹起用了回弹缓动。easeOutBack 会先冲过目标角度再退回来，配合邮箱那两下衰减震动，整个“信到了”的反馈非常有分量。

投递动画为什么看着这么顺

其一，跟随用的是指数平滑而不是固定插值系数。源码里对鼠标和信封位置都用了这个写法：

envelope.position.lerp(followTarget, 1 - Math.exp(-delta * 8));

常见的写法是直接给 lerp 一个固定的 0.1，问题是帧率一变，跟随速度就跟着变——高刷屏上会显得太快，掉帧时又拖沓。把 delta 放进指数里，跟随的“时间常数”就与帧率无关了，60Hz 和 144Hz 手感一致。

其二，投递分成“接近”和“塞入”两段。前 0.75 秒信封从当前位置插值到投信口正前方，同时用四元数球面插值把姿态转平——这一步用四元数而非欧拉角，才不会出现绕轴翻转的怪异中间帧。之后 0.5 秒才沿深度方向推进去，同时整体缩小七成，配合投信口的遮挡形成“被吞进去”的错觉。

其三，目标位置是每帧现算的。投信口的世界坐标通过 getWorldPosition 取得，而不是写死一个常量。这意味着你把整只邮箱挪个位置、转个角度，投递轨迹会自动跟着对，不用重新调参数。

拿到源码后能改什么

配色集中在脚本上方的材质表里，蓝、青、深、粉、黄、白、珊瑚七个色一目了然，换成品牌色最快。背景渐变在样式文件里的 body 背景，改的时候记得把场景雾气颜色一并调整，否则远处会露边。

节奏方面，投递两段的时长（0.75 与 0.5）、升旗时长（0.85）、送达后自动复位的等待（3 秒）分别写在各自的状态分支里，都是可以直接搜到的字面量。想做成“投完就停”，把自动复位那句去掉即可。

灯光是三盏：一盏半球光打底、一盏带阴影的主光、一盏粉色点光做轮廓补光。想让画面更硬朗就调高主光强度并把阴影贴图尺寸从 1024 提上去；想更柔和则降低主光、提高半球光。相机的机位、视场角在文件开头几行，做竖屏时把视场角调大一点更稳妥。

运行提示：页面通过 importmap 从 CDN 加载 Three.js，脚本以 module 方式引入，必须用本地服务器打开，直接双击会因跨域限制而空白；内网部署请把 Three.js 下载到本地并改 importmap 路径。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。

关于这个邮箱投信特效的常见问题

能不能改成点击后跳转或提交表单？

可以。投递流程的终点是状态切到“已送达”那一句，在那里插入你的回调即可，比如提交订阅表单、弹出成功提示。建议等旗子升完再触发，动画完成度更高。

信封上能放自己的 Logo 吗？

能。信封现在是一块白色方盒加一枚圆形邮票和一条折线封口，把邮票那块换成带贴图的材质就行——用纹理加载器读一张 PNG，赋给对应网格的 map 即可，比重新建模省事。

手机上表现如何？

指针事件在触摸屏上同样有效，点邮箱可以触发投递；只是没有悬停态，所以光标变化那部分在移动端看不到。像素比已经限制在 2 倍以内，中端机型能稳定运行。

阴影很糊或边缘有锯齿怎么办？

把主光的阴影贴图尺寸提高一档通常就能解决，代价是显存占用增加。若是边缘锯齿，可确认渲染器的抗锯齿选项已开启，并适当提高像素比上限。

这段邮箱动效适合放在哪里

它讲的是“消息送达”这件事，最合适的位置就是邮件订阅区、联系我们页面、留言提交成功页，也可以用在 SaaS 产品的通知功能介绍页做示意。因为整套模型都是代码生成的，改成信箱、快递柜或礼物盒也不需要建模工具。射线拾取、状态机、四元数插值与回弹缓动的完整实现都在源码里，下载后可直接查看。