THREE.js FBXLoader обрабатывает .png как .psd и не загружает материал
При использовании THREE.js FBXLoader для загрузки файла .fbx модель загружается частично, а части модели с альфа-текстурой не загружаются.
Я получаю сообщение об ошибке:
FBXLoader: PSD textures are not supported, creating empty placeholder texture for pinebranchColor.psd
Несмотря на то, что в папке с материалами нет файлов .psd. Как вы можете видеть на скриншоте ниже, кажется, что в материале alphaMap имя текстуры pinebranchColor.psd.
Вот как отображается модель FBX:
И это то, что он отображает, как если бы я загружал версию GLTF (примечание: прозрачные части для листьев не подхватываются как прозрачные) - что ближе к тому, как это должно выглядеть, но не полностью.
Вот как модель должна выглядеть согласно скетчфаб:
Как вы думаете, почему там написано, что альфа-материал — это .psd? Может быть, это указано в самом файле .fbx? Первоначальная проблема заключалась в как мне получить альфу/прозрачность для правильного рендеринга листьев, а не в цвете блока. Может быть, я мог бы установить свойство в материале THREE.js версии GLTF, и это сработало бы?
Это первая модель, которую я когда-либо импортировал в THREE.js, так как я только начал учиться, поэтому, пожалуйста, объясните, как можете.
Обновлено:
В инструментах разработчика я нашел материал для листьев и установил прозрачность true. Это сработало! По мере. Но есть еще некоторые проблемы с рендерингом. Так что я думаю, что это путь вниз.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не уверен, почему не удалось загрузить альфа-материал FBX, но я решил проблему прозрачности с версией GLTF, используя функцию THREE.js scene.traverse и установив для свойства materialtransparent значение true для всех листовых материалов в сцене. .
Это решило основную проблему, но остались некоторые артефакты, как видно на этом изображении, где листья затемнены:
Решение заключалось в том, чтобы также установить alphaTest на 0.5 для материала, что дало следующий результат:
Вот код:
gltf.scene.traverse(child => {
if (child.isMesh && child.name.includes('leaf')) {
child.material.alphaTest = 0.5;
child.material.transparent = true;
}
});