作者: Theodore
在线体验 关于项目
ANOMALY 是一份关于十六种真实动物的档案，它们的身体都长着一处看起来不该成立的结构：管眼鱼颅顶那层透明的充液穹顶、螳螂虾能在水中制造空化气泡的捕肢、翻车鱼干脆缺席的尾鳍。十六个 Tripo 模型分别对应一条记录（A-001 至 A-016），可直接拖拽转动、缩放、复位。
档案不按分类学排列，而按异常结构本身归档——透明、视觉、生物发光、伪装、捕食、巨型化、体制构型七类，外加一条与之正交的深海筛选；一个标本可以同时挂在多类之下，管眼鱼的透明穹顶与可转动的管状眼就是同一只动物身上的两处异常。因此每条记录的标题位是那处解剖结构，而不是动物的名字。整站锁定在一屏之内：选择分类、点击标本卡片或搜索结果，内容都在原地替换——左栏是档案图版、观察记录与可折叠的田野笔记，中央是 3D 标本舞台，右栏是物种数据与分布图。
体验要点
- 底部标本栏 01–16 任选一条记录，中央舞台与左右两栏同步换页；拖拽转动标本、滚轮缩放，切换时相机自动回到统一初始机位，十六个标本以可比的体量呈现、互不影响
- 点击左栏档案图版，它从缩略图原位放大成观片灯箱——图版即背光透射片，光从边缘溢出；最高放大 3.2 倍，拖拽平移看细节
- 按异常结构筛选七类：透明、视觉、生物发光、伪装、捕食、巨型化、体制构型，外加一条按生境正交匹配的深海档案；一个标本可以同时挂在多类之下——管眼鱼的透明穹顶与管状眼是同一只动物身上的两处异常；搜索框跨物种名、学名、异常结构与标本编号检索
- 模型加载期间，GSAP 在舞台上逐笔画出该标本的测绘线稿，一枚卡尺沿标尺往返——图纸先于实物到场，就绪后线稿与 3D 模型交叉淡入；已缓存的模型也让图纸至少停留 1.5 秒，不让它一闪而过
技术解析
3D 资产 · Tripo 高模的网页化管线
十六个标本模型由 Tripo 生成，原件每个约 60MB、190 万三角面——雕塑级密度没法直接上网页。gltf-transform meshopt 管线把几何压到 2.4–11MB：焊接顶点、按 0.0002 容差简化、剪枝后 meshopt 压缩；纹理特意保持 4K 不降采样——降采样省不了多少、反而是画面发软的主因，8K 交付的底色图统一压回 4K（单张显存从约 358MB 降到 89MB，屏上尺寸下无可见损失）。
每个标本按 GLB → 静帧 → 抠像图 → 手绘线稿四级独立降级，图版缺失还有制图网格兜底，缺任何一个文件都不会让舞台开天窗。
标本舞台 · 自动测量取景与上下文保护
十六个模型交付时没有统一规范，也没有一个是手调变换的：每个模型在加载时于自身根矩阵空间测量——在世界空间重测会把已应用的缩放读回来，每次重测模型就缩小一点。测量用分位数包围盒而非原始 Box3：好几只动物的触角与丝状附肢只占极小比例的顶点，却会撑大包围盒、把身体本体压小；掐掉两端极值后箱体围住的是躯干，十六个标本才以可比的视觉体量呈现。自动取景把最长水平轴转向屏幕、居中并按画布填充，新标本丢进目录即自动框好，个别只留一个角度微调参数（砗磲是「盖子」不是「侧影」）。
Canvas 不按标本 key：那会在每次切换时拆毁重建 WebGL 上下文，而浏览器会回收最旧的上下文；只对内层 Scene 加 key。模型节点必须 dispose={null}——drei 的 GLTF 缓存在克隆间共享几何体，让 R3F 在卸载时销毁会把还在使用的缓冲区一并带走。
灯光 · 按展柜而非翻拍台布光
一盏塑形主光，两道从后方掠射的轮廓光，不留地面反弹——这些动物大多通体深色，把深色躯体从深色底面上分开的是边缘，轮廓光干的就是这件事。环境贴图由场景内的面光源就地烘焙（Environment 挂在 keyed Scene 之外，切换标本不重烘），零 HDRI 下载、零外部请求。
仅靠打光仍分不开最深的标本——深红棕的乌贼和暖棕的底面在明度上确实接近，于是标本站进一汪柔和的光池，接触阴影就咬在这汪光上，剪影因此打开。色调映射用 Khronos PBR Neutral（曝光 1.34）而非默认 ACES——后者把中间调压得很狠，正是标本发闷的原因。
加载态 · 拒绝说谎的进度
drei 的 useProgress 按文件计数而非字节：纹理内嵌的单文件 GLB 整个只算一项，进度条会在 0% 停完整个下载、最后瞬间冲到 100%——数字本身就是谎言。于是加载态不给百分比：DrawSVGPlugin 逐笔画出该标本的测绘线稿，一枚卡尺沿刻度尺往返滑动，只声明「工作正在进行」、不假装知道还剩多少。
模型就绪后线稿与 3D 交叉淡入完成交接；已缓存的模型也让图纸至少停留 1.5 秒，否则一闪而过没人读得到。prefers-reduced-motion 下装饰动画停止、最短停留取消——减少动效应该减掉的是动效，不是功能，更不该新增等待。
