A see-through object appears only properly when viewed from one specific angle

I am currently working with THREE.js and the WebGL renderer, facing an issue with a self-transparent object in my scene. This object is composed of a single geometry with a basic material that includes a texture and has the transparent: true property enabled. Strangely, when viewed from one side, the transparent parts of the object layer correctly, but not from the other perspective:

On the left side, the trees appear incorrect as they ignore the map behind them. However, on the right side, the trees display fine allowing the background map to be visible through them. It's worth noting that everything you see is part of a single geometry.

Does anyone have any suggestions for solving this problem?

As a temporary workaround, I have been creating each transparent face as its own individual object, although I know this is far from an ideal solution.

javascriptopengl-es3dthree.jswebgl

Answer №1

I encountered a similar issue in the past.

Here is a helpful video that explains why this issue occurs:

Understanding Mesh Transparency

Consider using renderer.sortObjects and object.Model.material.depthWrite to address this issue, although achieving a perfect fix may be challenging. It might consume significant GPU resources. Feel free to share your code snippets on platforms like Codepen or pastebin so I can assist you better.

UPDATE: You could attempt setting all transparent Meshes' depthWrite property to false:

object.Model.material.depthWrite = false;

UPDATE 2: Try setting depthWrite = false specifically for Transparent Objects!

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

ZeroMQ and Electron integration: Unable to find the specified bindings file

Currently, I am running Windows 7 x64 with nodejs 5.1.0 and Electron 0.35. I carefully followed the instructions provided by the Electron Quick Start app and then proceeded to add the line require("zmq") to the main.js file. However, upon executing npm ins ...

javascriptnode.jsnpmzeromqelectron

Creating a Singular Instance for Dynamically Loaded Module in Next.js

I'm currently working on creating a Singleton instance for a dynamically imported module in my Next.js app. However, the problem is that each time I call getInstance, it initializes a new instance instead of reusing the existing one. The following co ...

javascriptnext.js

Uploading Files with PhoneGap using Ajax

I have been attempting to execute this PhoneGap example for uploading images from a device to a server. // Wait for PhoneGap to load // document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap is ready // functi ...

phpjavascriptandroidajaxcordova

Adjust the size of the Threejs canvas to fit the container dimensions

Is there a way to determine the canvas size based on its container in order to prevent scrolling? Setting the size based on the window results in the canvas being too large. ...

javascriptthree.js

Sending a PHP variable to a JavaScript function

When attempting to pass a value to a JavaScript function by clicking a link, I encountered an error message: Uncaught SyntaxError: Unexpected identifier The following is the code snippet: <?php include_once("php_includes/check_login_status.php") ...

phpjavascripthtml

The Correct Approach for Implementing Error Handling in a Node.js API Server

In my Node.js API server, I encountered an issue with error handling. To tackle this problem, I developed a module specifically for error handling. When in development mode, this module sends JSON objects containing errors to the API client. Here is an exa ...

javascriptnode.jsrestexpress

What's up with the Chrome Dev Tools Error Log?

I am having an issue with debugging JavaScript files using breakpoints in Chrome Dev Tools. Whenever an error occurs, a red error message flashes on the screen so quickly that I can't read what it says. Is there a way to change this setting or access ...

javascriptdebugginggoogle-chrome

Moment.js generated an error due to an unhandled promise rejection warning

I'm trying to determine if my current timestamp is equal or greater than a certain value, but I keep encountering errors. Here's my code with the error: {...} exports.validaforgotpass = async (req, res) => { {...} const results = aw ...

javascriptmysqlnode.jsapimomentjs

Looping through jQuery, I am adding divs, but frustratingly I can only insert text into the initial div created. Why

var numPills = 3 for(var i=0; i< numPills; i++){ //var currentPill = JUser.pill1.; $(".col-r-in").append( $('<div/>') .attr("id", "medsProgress") .addClass("roundedBar") ); $('#medsProgress').append( $('<div/>&apo ...

javascriptjquery

Parsing JSON data to extract values stored in a two-dimensional array

In order to develop a basic version of Tic Tac Toe, I decided to store game data in a JSON file. Here is an example of how the file is structured: [ { "turn": "x", "board": [ [ " ...

javascriptarraysnode.jsjson

Unreachable prevState when utilizing the useState hook

I am currently working on a component where I need to capture the previousState of an element. However, no matter what I try, it keeps returning the initial value. This suggests that there is some re-rendering happening, causing it to constantly default to ...

javascriptreactjsnext.jsuse-state

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

javascriptjqueryhtmlcsstwitter-bootstrap

Verify if data is correct before refreshing user interface

When attempting to submit the HTML5 form, it stops the form submission if any required fields are missing a value or if there is another error such as type or length mismatch. The user interface then shows highlighted invalid fields and focuses on the firs ...

javascripthtmlcssvalidation

Auth0 Angular - No routes found to match

I recently set up an angular application and integrated it with Auth0 by following two helpful tutorials: https://auth0.com/docs/quickstart/spa/angular2/01-login https://auth0.com/docs/quickstart/spa/angular2/02-calling-an-api Here is a brief overview o ...

javascriptangulartypescriptrxjsauth0

How come the use of a timeout causes the this variable to seemingly lose its reference?

What is the reason why this: myelements.mouseenter(function() { clearTimeout(globaltimeoutvar); globaltimeoutvar = setTimeout(function() { var index = myelements.index(this); console.log(index); // -1 }, 150); }); Returns -1, while this: m ...

javascriptjquerysettimeout

What is the proper way to invoke a function that is part of a child component as a property in a React application?

In my app.js file, I have included a unique component called "SigningComponent" with the following code: onSign = () => { this.setState({ route: "home" }); }; registerFunction = () => { this.setState({ route: "registration" }); }; render() { ...

javascriptreactjscomponentsparent-childreact-props

Iterating through every image displayed on a webpage

Two inquiries: What is the best way to efficiently loop through every image on a specific webpage and open each one in a new browser tab? Similar concept, but instead of opening in a new tab, I am interested in substituting different images for the ...

javascripthtmldom

Deciphering Encrypted JSON Data

In need of help with our app that generates complex JSON objects where properties and values are in hexadecimal format. How can we convert them back to strings? Example Object: { "636f756e747279": { "6e616d65": "43616e616461", "6 ...

javascriptjsonnode.jsstring-conversion

Having trouble with the automatic closing feature of Bootstrap drop down in React?

While using the drop button feature of Bootstrap, I have encountered a situation where it works fine when clicked on, but disabling it by clicking outside using autoClose='outside' does not seem to work as expected. When I click on my hamburge ...

javascriptreactjsonclickbootstrap-5auto-close

Exploring ways to extract HREF using Selenium in combination with Node JS

I am having trouble extracting the hrefs from my web element using .getAttribute("href"). It works fine when applied to a single variable, but not when looping through my array. const {Builder, By, Key, until} = require('selenium-webdriver'); (a ...

javascriptnode.jsselenium-webdriver