The THREE.js FBXLoader mistakenly identifies .png files as .psd files, causing issues with loading materials

Question

The THREE.js FBXLoader mistakenly identifies .png files as .psd files, causing issues with loading materials

While using the THREE.js FBXLoader to import a .fbx file, I noticed that the model is only partially loaded, and the alpha textured parts are not loading at all.

An error message I encountered is:

FBXLoader: PSD textures are not supported, creating empty placeholder texture for pinebranchColor.psd

Oddly, there are no .psd files in the materials folder. But the error seems to refer to the texture name pinebranchColor.psd in the material alphaMap, as shown in the screenshot below:

https://i.sstatic.net/s6mk2.png

Here is how the FBX model is currently rendering:

https://i.sstatic.net/ckwxc.png

The GLTF version of the same model displays transparent parts incorrectly, as seen in the image below:

https://i.sstatic.net/1GgIo.png

The correct appearance of the model can be seen on sketchfab :

https://i.sstatic.net/lu6NG.jpg

Why is the alpha material being identified as .psd? Is this encoded in the .fbx file itself? My initial issue was regarding how to render the alpha/transparency for the leaves correctly, rather than as solid color. Perhaps adjusting a property in the THREE.js material of the GLTF version could resolve this?

This is my first time importing a model into THREE.js, as I am still learning. Please provide an explanation in simple terms.

EDIT: Upon inspecting the dev tools, I discovered a material for the leaves and set transparent to true, which partially solved the issue. However, there are still some rendering problems, so I believe more adjustments are needed in this direction.

javascript three.js 3d textures fbx

Answer 1

Answer №1

After encountering difficulties with loading the FBX alpha material, I managed to resolve the transparency issue in the GLTF version using the THREE.js scene.traverse function. By setting the material transparent property to true for all leaf materials in the scene, the core problem was successfully addressed.

Although the core issue was fixed, there were still some noticeable artifacts, such as blacked-out leaves. To address this, I also adjusted the alphaTest value to

0.5</code</p>

<p>You can see the difference in the before and after pictures below:</p>

<p><a href="https://i.sstatic.net/25twH.png" rel="nofollow noreferrer"></a></p>
<p><a href="https://i.sstatic.net/thFmD.png" rel="nofollow noreferrer"></a></p>

<p>For those interested, here is the code snippet used to implement the solution:</p>

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

Answer 2

After encountering difficulties with loading the FBX alpha material, I managed to resolve the transparency issue in the GLTF version using the THREE.js scene.traverse function. By setting the material transparent property to true for all leaf materials in the scene, the core problem was successfully addressed.

Although the core issue was fixed, there were still some noticeable artifacts, such as blacked-out leaves. To address this, I also adjusted the alphaTest value to

0.5</code</p>

<p>You can see the difference in the before and after pictures below:</p>

<p><a href="https://i.sstatic.net/25twH.png" rel="nofollow noreferrer"></a></p>
<p><a href="https://i.sstatic.net/thFmD.png" rel="nofollow noreferrer"></a></p>

<p>For those interested, here is the code snippet used to implement the solution:</p>

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

The THREE.js FBXLoader mistakenly identifies .png files as .psd files, causing issues with loading materials

Answer №1

Similar questions

Ways to dynamically incorporate media queries into an HTML element

In client.js, learn how to retrieve the value of an input tag (Name) from a login form

Transforming a PHP cURL call to node.js

Activate the function for items that are overlapping

Analyzing the list of paths that are passed to the function

Evaluating Vue.js Watchers using Jasmine

Guide on inserting a new user to the db.json

Retrieve a file from an AWS S3 bucket using AngularJS

Can you elaborate on the contrast between React Server Components (RSC) and Server Side Rendering (SSR)?

Exploring the Wonder of MVC with Ajax Calls Handling Multiple Parameters

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Eliminate elements from an array using a specific key for filtering

Unable to change the name of the file using ngx-awesome-uploader

Unlocking the power of RXJS by de-nesting subscriptions

Tips on moving a square along the z axis in three.js

Explore the feature of toggling visibility of components in Vue.js 3

What strategies are effective for handling state reactively in Vuex?

What adjustments can I make to my smooth-scrolling JavaScript code in order to exclude my Bootstrap Carousel from the scrolling

Does React have an event component that detects when a user is actively viewing a specific component, such as a post?

Ways to showcase hierarchical list information in tabulator