HTML5建模不支持直接导入PSD文件，需将PSD图层导出为PNG等Web兼容格式纹理后再加载；导出时须栅格化样式、启用透明度、使用2的幂次尺寸并语义化命名，Three.js中需注意法线贴图Y轴方向适配。
PSD 是 Photoshop 的专有二进制格式，浏览器和主流 HTML5 3D 引擎（如 Three.js、Babylon.js）都不具备原生解析能力。
你真正需要的，是把 PSD 中的图层内容“导出为可用纹理”，再在 HTML5 场景中加载使用。关键不在“导入”，而在“分层导出 + 正确映射”。
为什么不能直接用 PSD 当纹理？
浏览器无法识别 .psd 文件结构；Three.js 的 TextureLoader、Babylon.js 的 Texture 构造函数只接受 .png、.jpg、.webp 等解码器内置支持的格式。PSD 包含图层、蒙版、矢量形状、智能对象等非渲染信息，这些对 WebGL 纹理毫无意义。
PS 图层导出成纹理的实操要点
不是“保存为 PNG”就完事。导出质量、尺寸、透明通道、命名逻辑，直接影响后续贴图映射效果：
- 关闭所有无关图层，只保留当前要作纹理的图层（或图层组），避免导出多余空白
- 使用
文件 → 导出 → 导出为…（不是“存储为”），勾选透明度，格式选PNG；若需高清适配，导出尺寸建议为 2 的整数次幂（如512、1024、2048） - 图层含内阴影/外发光等图层样式？必须先
右键图层 → 栅格化图层样式，否则导出后效果丢失 - 命名带语义：比如
door_diffuse.png、door_normal.png、door_roughness.png，方便 Three.js 中按命名规则自动挂载
Three.js 中加载并绑定多张 PSD 导出的纹理
假设你从 PSD 分别导出了漫反射（diffuse）、法线（normal）、粗糙度（roughness）三张贴图，对应同一模型区域：
const textureLoader = new THREE.TextureLoader();
const diffuseMap = textureLoader.load('textures/door_diffuse.png');
const normalMap = textureLoader.load('textures/door_normal.png');
const roughnessMap = textureLoader.load('textures/door_roughness.png');
const material = new THREE.MeshStandardMaterial({
map: diffuseMap,
normalMap: normalMap,
roughnessMap: roughnessMap,
roughness: 1.0 // 注意：roughnessMap 会覆盖该值，但需设初值防报错
});
const mesh = new THREE.Mesh(geometry, material);
⚠️ 容易忽略的点：normalMap 默认按 OpenGL 方向解析（Y 向上），而 Photoshop 导出的法线贴图通常是 DirectX 方向（Y 向下）。Three.js 需手动翻转：normalMap.flipY = false;
立即学习“前端免费学习笔记（深入）”；
批量导出 PSD 图层的替代方案（省人工）
如果 PSD 有几十个图层要转纹理，手动导出效率极低。可考虑：
- Photoshop 脚本：运行官方提供的
Export Layers to Files.jsx（位于Presets/Scripts/），支持按图层名导出 PNG，但不自动处理图层样式栅格化 - 命令行工具：
psd-tools（Python 库）能读取 PSD 结构并提取图层为 PIL Image，适合写自动化脚本，但不支持混合模式、智能对象等高级特性 - 更稳的路径：让设计师交付时就提供分层 PNG + JSON 映射表（如哪个图层对应哪块 UV 区域），前端按表加载，而非倒推 PSD 结构
真正卡住项目的，往往不是“怎么导出”，而是“导出后贴图坐标没对齐”或“法线方向反了导致光照发黑”——这些细节比格式转换更消耗调试时间。
