THREE.js FBXLoader 将 .png 视为 .psd，并且不加载素材

Posted 2023-03-23

【中文标题】THREE.js FBXLoader 将 .png 视为 .psd，并且不加载素材

【英文标题】：THREE.js FBXLoader treats .png as if it is a .psd, and doesn't load the material

【发布时间】：2019-10-13 08:52:36

【问题描述】：

当使用 THREE.js FBXLoader 加载 .fbx 文件时，它会部分加载模型，而不会加载模型的 alpha 纹理部分。

我收到错误：

FBXLoader：不支持 PSD 纹理，为 pinebranchColor.psd 创建空的占位符纹理

尽管材料文件夹中没有 .psd 文件。从下面的截图可以看出，似乎认为在材质 alphaMap 中，纹理名称为pinebranchColor.psd。

这是 FBX 模型被渲染的样子：

这就是它呈现的内容，就好像我加载了 GLTF 版本一样（注意：叶子的透明部分没有被拾取为透明）——这更接近它的外观，但并不完全。

根据sketchfab ，这就是模型的外观：

为什么你认为它说 alpha 材料是 .psd？ 这可能是在 .fbx 文件本身中引用的吗？最初的问题是如何让叶子正确渲染的 alpha/透明度，而不是作为块颜色。也许我可以在 GLTF 版本的 THREE.js 材料中设置一个属性，这样就可以了？

这是我刚开始学习的第一个导入到 THREE.js 中的模型，所以请尽可能解释一下。

编辑： 在开发工具中，我找到了叶子的材质，并将透明设置为true。这行得通！在一定程度上。但是仍然存在一些渲染问题。所以我认为这是下降的路线。

【参考方案1】：

我不确定为什么无法加载 FBX alpha 材质，但我通过使用 THREE.js scene.traverse 函数解决了 GLTF 版本的透明度问题，并将 material transparent 属性设置为true，用于场景中的所有叶子材质。

这解决了核心问题，但仍然存在如图所示的一些伪影，后面的叶子被涂黑了：

解决方案是在材质上也将alphaTest 设置为0.5，得到以下结果：

代码如下：

gltf.scene.traverse(child => 
  if (child.isMesh && child.name.includes('leaf')) 
    child.material.alphaTest = 0.5;
    child.material.transparent = true;
  
);