LOADER · Vite + three
PBR 贴图全套加载Full PBR texture set loading
LoadingManager 并行加载 color/normal/roughness/metalness/ao,统一进度。
效果预览
轻量 WebGL 示意(非完整工程实现),可拖拽旋转;完整逻辑见下方提示词。
预期产出 · Returns
Vite:进度条 + 加载完成后应用到 Sphere,贴图路径集中配置。
适合用在哪
自建材质球、Substance 导出贴图、产品渲染页。
容易踩的坑
- albedo 未设 SRGBColorSpace 会发灰。
- aoMap 需第二套 UV 或复用 uv。
提示词 · Prompt
Vite + Three.js PBR 贴图加载:
1) TextureLoader + LoadingManager 统计总体进度;
2) 常量 MAP_BASE 指向一组 cc0 贴图 URL(可 placeholder);
3) MeshStandardMaterial 绑定 map/normalMap/roughnessMap/metalnessMap/aoMap,设置 colorSpace(SRGB 对 albedo);
4) 失败时显示错误与重试;
5) 加载前显示 wireframe 占位;
6) 中文 README 说明贴图命名约定。
完整代码。
Vite LoadingManager loads full PBR maps onto standard material with progress UI.