Three.js中创建自定义圆角矩形组 复刻FWA站点平铺卡牌牌堆效果

第一步：无偏差提取参考站点的核心排布参数 #

这一步是保证卡牌位置完全对齐的核心，不需要自行计算坐标：

• 打开参考站点，调出浏览器开发者工具，切换到Memory面板，刷新页面生成内存快照，筛选所有Mesh类对象（即页面上的每一张卡牌）
• 直接导出每个Mesh的运行时属性：position三维坐标值、rotation三轴旋转角度、scale缩放比例、几何体宽高尺寸，整理成结构化的JSON数组本地存储
• 同步从网络请求面板提取所有卡牌对应的图片资源，全部存为本地静态文件，避免跨域资源问题

第二步：用最低代码量搭建无偏差渲染环境 #

跳过复杂的工程化搭建，用单HTML文件实现基础渲染逻辑，减少环境踩坑：

• 单文件引入Three.js核心库，不需要配置打包工具、开发服务器
• 相机固定选用正交相机，彻底避免透视相机带来的近大远小畸变：
  • 相机正对卡牌平面放置在z轴正方向，调整可视范围边界参数，保证整体视口和参考站点的可视区域尺寸完全匹配
  • 不设置相机倾斜角度，始终保持和卡牌平面垂直
• 渲染逻辑简化为静态一次性渲染：页面加载完成后遍历存储的排布参数JSON，逐个生成PlaneGeometry实例，把导出的位置、旋转、缩放参数直接赋值给对应Mesh，匹配对应本地卡牌贴图后完成一次渲染，不需要开启持续动画帧循环

第三步：像素级对齐偏差排查 #

核心排布跑通后，和参考效果做逐点对齐：

• 将自制页面与参考页面上下分屏显示，逐区域对比卡牌位置、大小、角度的偏差
• 常见偏差修正规则：
  • 卡牌整体偏移：调整正交相机的边界参数，不改动已提取的Mesh原始坐标
  • 卡牌尺寸失真：对齐渲染器输出分辨率与参考站点的设备像素比，不改动几何体的原始尺寸参数
  • 卡牌角度错位：核对导出的Mesh旋转参数，避免将弧度值误转为角度值赋值

第四步：学业项目适配的轻量优化 #

在核心排布完全对齐的基础上，仅添加低复杂度的增强效果，不增加额外开发负担：

• 可添加最基础的悬停交互：通过鼠标位置计算对应指向的卡牌Mesh，悬停时临时调整该Mesh的z轴位置实现抬起效果，移出后恢复原始参数
• 不需要引入复杂的物理引擎、全局滚动联动、粒子特效等额外模块，保证核心排布的还原度作为项目核心得分点

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