THREE.js FBXLoader обрабатывает .png как файл .psd и не загружает материал

Question

При использовании THREE.js FBXLoader для загрузки файла .fbx он загружает модель частично, а части модели с альфа-текстурой не загружаются.

Я получаю ошибку:

FBXLoader: PSD-текстуры не поддерживаются, создавая пустую текстуру-заполнитель для pinebranchColor.psd

Несмотря на то, что в папке материалов нет файлов .psd. Как видно из скриншота ниже, кажется, что в материале alphaMap имя текстуры - pinebranchColor.psd.

.

Вот как выглядит модель FBX:

И это то, что отображается, как будто я загружаю версию GLTF (обратите внимание: прозрачные части листьев не считаются прозрачными), что ближе к тому, как оно должно выглядеть, но не полностью.

Так должна выглядеть модель, согласно sketchfab :

Почему вы думаете, что это говорит, что альфа-материал - это .psd? Может ли это быть так, как указано в самом файле .fbx? Первоначальная проблема была как мне получить альфа / прозрачность для листьев, чтобы правильно отображать , а не как цвет блока. Может быть, я мог бы установить свойство в материале THREE.js версии GLTF, и это сработало бы?

Это первая модель, которую я импортировал в THREE.js, поскольку я только начал изучать ее, поэтому, пожалуйста, объясните как можно лучше.

EDIT: В инструментах разработчика я нашел материал для листьев и установил прозрачность на true. Это сработало! По мере. Но есть все еще некоторые проблемы рендеринга. Поэтому я думаю, что это путь, по которому нужно идти.

Answer 1

Я не уверен, почему альфа-материал FBX не мог быть загружен, но я решил проблему прозрачности с версией GLTF, используя функцию THREE.js scene.traverse и установив свойство 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;
  }
});