17370845950

HTML5建模不支持直接导入PSD文件，需将PSD图层导出为PNG等Web兼容格式纹理后再加载；导出时须栅格化样式、启用透明度、使用2的幂次尺寸并语义化命名，Three.js中需注意法线贴图Y轴方向适配。

HTML5 建模本身不支持直接导入 PSD 文件——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 结构

真正卡住项目的，往往不是“怎么导出”，而是“导出后贴图坐标没对齐”或“法线方向反了导致光照发黑”——这些细节比格式转换更消耗调试时间。