The alpha channel in THREE.js GLTFLoader is not displaying transparency and instead showing a white background

I imported a model created in Blender:

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

The texture of the model is partially transparent, achieved by converting the white background to alpha using nodes: https://i.sstatic.net/lSZ6w.png

To make this work correctly, I enabled BlendMode as AlphaClip (which does not function with blendmode = opaque): https://i.sstatic.net/4LocD.png

However, when loading the model into three.js like this:

            const gltfLoader = new GLTFLoader();
            var loader = gltfLoader.load(gltfPath, (result) => {
                let root: Group = result.scene


                root.scale.setScalar(10);
                root.name = name;
                root.castShadow = true; 
                root.receiveShadow = true;
                //root.rotation.x = -90;

                let objectWrapper = new Object3D();
                objectWrapper.add(root);

                resolve(objectWrapper);
                console.log("Called!")
            });
        });

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

The alpha transparency is not functioning properly - how can I resolve this issue? Are there any alternative methods for achieving alpha transparency or specific settings within GLTFLoader that could help?

Answer №1

When it comes to Blender's node graphs, they are specific to Blender and do not export in general. If your goal is to create materials for exporting to glTF, be sure to follow the exporter guidelines provided in the link below.

To summarize, while using the alpha socket on Principled BSDF is fine, textures should be connected directly to Principled BSDF sockets, with some exceptions. A lengthy chain of nodes between the texture and Principled BSDF will not function as intended.

If you ever need to convert a node graph into a texture, there are helpful resources such as youtube tutorials on "baking blender materials to texture", or you can utilize the SimpleBake addon for assistance.

Answer №2

Here are some solutions to help resolve your problem:

(…).opacity = 1
(…).alphaThreshold = 0.02
(…).enableDepthTesting = true
// (…).disableDepthWriting = false is the default in GLTFLoader, but you can experiment with it

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying inner content without altering CSS styling

Inside this div, there is a paragraph: This is the HTML code: <div id="header"><p>Header</p></div> This is the CSS code: #header p { color: darkgray; font-size: 15px; Whenever a button is clicked, the innerHTML gets updated: H ...

How can I retrieve an array of data from Firebase Firestore using React Native?

I have been working on fetching Array data from Firebase Firestore. The data is being fetched successfully, but it is all displaying together. Is there a way to fetch each piece of data one by one? Please refer to the image for a better understanding of ...

JavaScript HTML Object Manipulation and Templating System

I am searching for a JavaScript library that is capable of performing the following: var items = [1, 2]; var html = div( ul({ id: "some-id", class: "some-class" })(items.each(function(item) { return li(item); })); html == ...

Tips for implementing mongoDB regex in an Express application

Is there a way to use regex in MongoDB to filter results based on a specific query parameter in the URL? I attempted to use $regex syntax in the query.find() method but it did not provide the expected outcomes. Appreciate any help with this, thank you. C ...

Double-clicking with Ajax and JSF after the initial click

When I interact with a dataTable that has a column named DELETE (which is a link) and has a listener attached to it, I experience an issue. After clicking on the link for the first time (click 1), the row gets deleted as expected. However, subsequent click ...

Is there a more efficient method for converting an array of objects?

Is there a more efficient way to change just one value in an array without iterating through every element? I've included the code below where I am trying to update the contact number for each user in an array. Although my current solution works, it ...

utilizing loop to incorporate javascript callback

I am just starting to learn about asynchronous programming and I'm facing a challenge that I can't seem to solve. In my node.js app, I am working on serving stock quotes. The task involves querying a database for details of various companies, sen ...

What is the best way to assign src and alt attributes to an image tag using JavaScript?

As I continue to learn JavaScript, please bear with me as I navigate through my current level of understanding. I am working on a gallery that opens a modal when an image is clicked. I have successfully gathered all the image sources into an array and used ...

What method can we use to verify if an object falls within a specified date range when filtering?

Looking to determine if the current filter object falls within a specific date range and return a boolean value based on that condition. However, the code provided always returns the data. Can anyone spot the error in the implementation or suggest a better ...

Can you explain the meaning behind this TypeScript variable declaration syntax?

Can anyone explain the meaning of this code snippet: myCollection: Collection|any = null; I'm having trouble understanding it... Does it indicate that myCollection is set to type Collection, (which is an interface), with a default value of null? But ...

Tips on avoiding the repetition of jQuery functions in AJAX responses and ensuring the effectiveness of jQuery features

My HTML form initially contains only one <div>. I am using an AJAX function to append more <div> elements dynamically. However, the JavaScript functionality that works on the static content upon page load does not work for the dynamically added ...

Invoke a Google Apps Script through AJAX that necessitates authentication

I am looking to access a Google Apps Script via AJAX that requires user authorization to send an email from their Gmail account. The challenge lies in the fact that I need to send the email from within the Google Apps Script. The call originates from my w ...

What is the best way to set the first option in a mat-select to be

My approach to date selection involves using 3 mat-select components for day, month, and year. You can view a demo of this setup here. In an attempt to improve the code, I decided to set the initial options as null by modifying the following lines: allDat ...

undefined is returned within a nested return statement

I need to pass some specific props, such as mapObject={this.props.mapObject} details={this.props.parsedData.categories[key], to another component called Item. However, I am encountering an issue where I receive a TypeError: this is undefined. Initially, t ...

Tips for determining which site was accessed

My store is linked to a grid and when it loads, it has multiple pages. Now, I need to display the page that contains a specific value. To achieve this, I make use of store.load({params: {'file': 'file33939'}});. Despite not knowing the ...

Issues in making Material UI AppBar work with React Router 4

I am currently working on a React project using Material-UI and React Router 4. However, I am facing an issue where a basic example is not working as expected and I am unable to figure out the reason behind it. Despite following the basic example provided ...

Importing external components from the parent directory in Next.js is a seamless process

I am trying to import react components from an external directory called common into the web-static directory while using nextjs. However, I keep encountering an error that says: Module not found: Can't resolve 'react' in '/Users/jakub ...

Exploring the functionality of iterating through a JSON array of objects with a foreach loop in both JavaScript and Jade

I have a json array that I am trying to display using foreach loop. However, it takes five iterations to show all the data when I would like it to be displayed in a single iteration. How can I achieve this? Below is the jade file code snippet: each item i ...

Tips for resolving the problem when encountering the "undefined data" issue in the success callback of an AJAX request

I am facing an issue with my JSP page where I have a button that calls an Ajax method named "sendmail()" upon click. The send mail API is in the Controller, and I am trying to display an alert message in the Ajax success function using data.message, but it ...

React DataGrid fails to refresh when state changes

Currently, I am in the process of developing a link tree using the Datagrid Component provided by MaterialUI. While data can be successfully displayed, I encounter an issue when attempting to add a new entry. The problem lies in the fact that despite cha ...