Three.js 钱包资产展厅：3D 很酷，但资产列表先要能读

Three.js 钱包资产展厅：3D 很酷，但资产列表先要能读

用 Three.js 做钱包资产展厅很酷：NFT 悬浮、霓虹空间、3D 卡片、动态粒子。问题是，钱包资产首先是信息：名称、数量、价格、链、风险状态。3D 不能牺牲可读性和操作效率。

资产展厅可以有沉浸感，但不能让用户找不到资产、看不清价格、点不到操作按钮。

在实际工程中，3D 资产展厅的最大误区是"把 3D 当成必选项，而不是可选项"。很多产品设计时先定了"要酷"，再想"怎么把资产放进去"，结果 3D 效果很炫，但用户找不到自己持有的 USDC 余额、看不清 NFT 的稀有度排名、点不到"卖出"按钮。这种"视觉优先、功能靠后"的设计，在 demo 时很吸引人，但在真实使用场景中会让用户迅速疲劳。工程上更稳健的做法是：先设计"资产信息管理"（列表、搜索、筛选、排序、操作），再考虑"如何用 3D 增强体验"。3D 是加分项，不是基础项；基础项必须先稳。

更深层的问题是：Web3 用户的设备性能差异极大。有的是高端游戏本，有的是旧手机，有的是公共电脑。如果产品强依赖 WebGL 3D 渲染，就等于自动排除了部分用户。生产级系统需要设计"渐进增强"：设备支持 WebGL 2.0 且性能足够时，加载 3D 场景；否则降级到 CSS 3D 或纯 2D 列表。这种"能力检测 + 降级"的设计，比"一刀切要求 3D"更符合 Web3 的开放精神。

一、信息层级先于视觉效果

flowchart TD A[Wallet Assets] --> B[Readable List] A --> C[3D Preview] B --> D[Action] C --> D

3D 场景适合做预览和氛围，核心资产信息仍然要有清晰列表或面板承载。

二、3D 卡片要限制数量

一次渲染几百个 NFT 卡片，性能会很快掉下去。可以只展示精选资产，其余用列表分页。

const visibleItems = assets.slice(0, 24);

用户不是每次都要在 3D 空间里看完全部资产。性能和可读性都需要克制。

三、交互要有普通替代路径

3D hover、拖拽、旋转很酷，但移动端和键盘用户可能不方便。关键操作要在普通 DOM 面板里也能完成。

asset_actions: view_detail copy_contract open_explorer list_for_sale

这些操作不能只藏在 3D 点击里。

四、性能预算要写清

performance_budget: fps_min: 50 initial_assets_3d: 24 texture_max_size: 1024 fallback_to_list: true

如果设备性能不足，直接切到列表模式。炫酷不是让用户手机发烫的理由。

在生产环境中，3D 资产展厅的一个常见踩坑是"纹理加载阻塞主线程"。NFT 图片可能很大（如 4K 图片），如果直接作为 Three.js 纹理加载，会占用大量内存，导致帧率下降甚至页面崩溃。工程上更稳健的做法是：先加载低分辨率预览图（如 256x256），等 3D 场景稳定后再渐进加载高清纹理；或者使用 GPU 压缩纹理（如 Basis Universal），大幅减少内存占用和加载时间。

另一个边界场景是"WebGL 上下文丢失"。浏览器可能因为内存不足、显卡驱动问题、或用户切换标签页而导致 WebGL 上下文丢失，此时 3D 场景会黑屏或报错。生产级系统需要监听webglcontextlost和webglcontextrestored事件，保存当前场景状态，在上下文恢复后重新渲染。如果恢复失败，则降级到静态列表。这种"上下文丢失处理"在桌面端很少遇到，但在移动端和低内存设备上很常见，是 3D Web 应用的必备健壮性措施。

资产展厅还要处理加载状态。3D 纹理、NFT 图片和价格数据可能来自不同源，不能等所有资源都加载完才显示页面。可以先显示资产列表，再逐步增强 3D 预览。

progressive_render: list_first: true low_res_texture_first: true lazy_load_3d: true fallback_static_card: true

这样弱网用户也能完成基本任务，高性能设备再享受沉浸体验。

可访问性也不能丢。3D 画布里的资产，需要在 DOM 列表里有对应文本信息，键盘和读屏用户仍然能浏览、复制合约地址、打开浏览器链接。

五、总结

Three.js 钱包资产展厅可以提升沉浸感，但信息可读性、操作效率和性能预算要先定清楚。3D 展示负责氛围，资产列表负责理解。

Web3 产品可以很酷，但用户最终要完成任务。看得清、点得到、跑得稳，比多一层霓虹更重要。

Three.js 是表达层，不是信息架构本身。信息架构稳了，3D 才是加分项；信息架构乱了，3D 只会把混乱变得更炫。

工程上要把 3D 场景和资产数据层解耦。资产列表、价格、链状态由数据层管理，Three.js 只订阅可展示的数据切片。这样列表模式和 3D 模式能共用同一份状态。

asset_view_model: id name chain image_url floor_price risk_flags

有了稳定 view model，3D 只是另一种渲染方式，不会把业务逻辑散落到材质、mesh 和点击事件里。

最后还要监控真实设备性能。桌面端 60fps 不代表移动端可用，WebGL context lost 也要处理。失败时退回静态卡片，比让页面黑屏专业得多。