Disappearance of model components in Three.js STL-model due to transparency issues

Good day,

We have encountered an unusual behavior while using Three.js to display an STL model. When we attempt to enable transparency, certain parts of the 3D model disappear when they are obscured by another transparent component. However, other parts that are positioned behind the same transparent element remain visible.

As a newcomer to Stack Overflow, I am unable to include an image with my post. Nonetheless, you can view two screenshots illustrating the issue on my GitHub report: https://github.com/mrdoob/three.js/issues/7929

The first screenshot displays the external components of the model, while the second reveals that most of these components vanish when hidden by a transparent part.

The transparency feature seems to be functioning correctly, but specific parts mysteriously disappear. Our loader is an enhanced version of the standard STL-loader, incorporating modifications related to coloring.

Do you have any recommendations on what might be causing this issue, or if there is a flaw in our approach? Could it potentially be a bug within three.js itself?

I appreciate your input and apologize for any inadvertent violations of protocol on Stack Overflow.

Answer №1

Make sure to set the material of your stl model to be doublesided when loading it:

material.side = THREE.DoubleSide;

This could potentially resolve any issues you are experiencing.

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

Transfer a term to a different division - JavaScript Object Model

I am trying to achieve a specific task where I need to move one term under another in SharePoint. However, despite my efforts using JSOM and SharePoint 2013, I have not been able to find a direct method for moving terms. The code snippet I have used below ...

Errors have popped up unexpectedly in every test file after importing the store into a particular file

Using Jest and Enzyme to test a React application has been successful, but encountering failures when importing redux store in a utility file. The majority of tests fail with the following error: FAIL app/containers/Login/LoginContainer.test.js ● Te ...

Transform coordinated universal time to the corresponding local time using Angular

Looking to transform the UTC format date into an India date and time format using Angular 2019-02-18T17:31:19-05:00 I am looking for it to be in the following format: DD/MM/YYYY HH:MM(eg: 02/19/2019 04:01 AM). Any guidance on how to accomplish this would ...

Adding AngularJS to Syncfusion grid or making the rows clickable and running AngularJS functions can be achieved by following these steps

I'm currently incorporating angularJs and Syncfusion to display data in a table using the Syncfusion grid (). However, I'm encountering difficulties in utilizing angularjs functions within this grid: <div class="table-responsive grid-tog ...

Execute the function using the method

Why am I unable to call the getCar () method of my Car function? In class, the teacher assigns the app variable to the express() function like this: const app = express(), and then he calls the app.get methods from the app. Why am I having trouble callin ...

Function for adding numbers in Javascript with currying

Can you help me solve this interesting problem? I need a javascript function that can return the sum of all arguments passed to it, even when called multiple times. I have identified different ways in which the function can be called - sum(1, 2, 3, 4); ...

The order of execution in AngularJS: Understanding the flow

I have taken over the responsibility of managing someone else's website, and while going through the codebase, I came across a snippet that looks like the one below (with some code omitted for simplicity): var Application = (function ($, global) ...

Providing data from a javascript xml file upon page initialization

I am aiming to extract multiple values from an XML file as soon as an HTML page is loaded. The XML file remains constant and will not change over time. It will be stored in the same directory as the HTML page. The purpose of this XML file is to fill severa ...

Cypress Error: Unable to locate module: Error - Unable to find 'cypress/types/lodash'

I am currently conducting my inaugural test in Cypress directly from the Visual Studio IDE. Everything was running smoothly until I suddenly encountered the error below, without making any changes or updates whatsoever. My Cypress (version 7.0.0) was inst ...

In a JavaScript array of objects, the Vuetify select :items feature allows you to assign an id and name to each object. When a name is selected, the corresponding id is automatically

I am currently working with an array of objects that contain both an id and a name property: Teams [ { id: 1, name: 'team1' }, { id:2, name: 'team2' } ] Is there a way to dynamically pass the names as items in a vuetify selec ...

Dynamic JavaScript Total Calculation

I have been struggling to update the total price for specific options. Even though the code was created by someone else and has worked fine for many users, I can't seem to make it work correctly. Any assistance would be greatly appreciated. Here is t ...

Decline in WebGL speed noticeable in recent updates of Chrome

Recently, I have noticed a significant drop in performance on Google Chrome when running projects created using three.js. Despite not making any changes to my projects, the frame rate has decreased from a smooth 60fps+ to a sluggish 20fps. This sudden decl ...

What makes it essential to use jasmine's runs and waitFor function?

My current task involves testing an asynchronous code snippet structured like this: randomService.doSomething().then(function() { console.log('The operation has been completed!'); }); Interestingly, I've noticed that the success messag ...

What is the best way to effectively use combinedLatestWith?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/country-card/country-card.component.html I am currently working on implementing a search bar in Angular that filters the "countries$" Observable based on user input. My approach involves creatin ...

Having trouble sending a POST request to an Endpoint with Formidable and Request

I am encountering an issue while attempting a basic file upload to a REST endpoint using Node. The error that keeps appearing is: TypeError: Cannot read property 'hasOwnProperty' of null Below is my form setup: <form action="/upload4" me ...

I am experiencing issues with the button click functionality in my Google extension

Greetings! I am currently developing a Chrome extension that will automatically redirect to my website and fill in the password. However, I am facing an issue with submitting the button click event. // Here is my manifest.json code { "name": "z", "v ...

Using Javascript to Retrieve Icecast Metadata

I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...

Tips for implementing a for loop following a mongoDB update?

I am working on a route with the following code : router.put("/:id", upload.single('doc_upload'), async(req,res)=>{ try{ const updatedUser = await User.findOneAndUpdate({ "client._id": req.params._id,"clients ...

What reasons could lead to useSWR returning undefined even when fallbackData is provided?

In my Next.js application, I'm utilizing useSWR to fetch data on the client-side from an external API based on a specified language query parameter. To ensure the page loads initially, I retrieve data in a default language in getStaticProps and set it ...

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

I am trying to create a loader, but I have encountered an issue where the script works when placed directly in the HTML file, but not when it is in a separate JavaScript file. Here is the script: var loader = document.getElementById("ld"); w ...