←所有项目

Meshy Avatar 接入 Three.js

把 Meshy AI 生成的 Lolita anime 角色，从 PBR 管线适配到 matcap toon 风格场景的完整流程。包含色彩空间、toneMapping、外壳描边的所有 tricky points。

📅 2026Three.jsGLTFMeshy AIShader

背景

/play/ 场景用的是 Bruno 原始的 matcap 扁平风（无灯光，靠 matcap 贴图模拟材质）。Meshy AI 生成的 GLB 模型是标准 PBR 流程（需要 normal map + metallic + roughness + 灯光）。两者互不兼容，硬合成会黑屏。

解决方案

四步法：

  1. Matcap 替换 PBR：MeshStandardMaterial → MeshBasicMaterial（unlit）
  2. 白色 tint 修复：material.color 强制 (1,1,1) 让贴图原色输出
  3. 色彩空间矫正：map.colorSpace = SRGBColorSpace + toneMapped: false
  4. 反向外壳描边：BackSide 黑色 + scale = 1.025

相关写作

详细的 tricky bug（包括 traverse() 级联陷阱）单独写在 《Bruno → Daisy 改造日记》 里。

复用性

这个方案对所有「Meshy / Tripo / Luma 之类 PBR 生成模型 + toon / matcap 场景」都适用，是个可迁移的技术片段。