What steps can I take to remove the dark areas in my see-through material?

While displaying a 3D shoe model in the browser using three.js, I encountered an issue with a half-transparent material set for the heel. The problem arises when I use the orbitControls in the project and rotate the model to a certain angle, which then reveals dark spots and fragmented triangles in the material.

https://i.sstatic.net/4TehM.png

My desired outcome is shown below:

How can I adjust the material properties to make it a solid color? The current material properties are set as follows:

new THREE.MeshPhongMaterial({
    color: 0xff0000,
    specular: materialParams.material3d.specular,
    shininess: materialParams.material3d.shininess,
    transparent: true,
    opacity: materialParams.material3d.opacity,       
    map: that.textureLoader.load(this.sourceUrl + 
    materialParams.material3d.icon),
    side: THREE.DoubleSide,
    blending: THREE["NormalBlending"]

})
javascriptthree.js

Answer №1

When rendering semi-transparent faces, it is important to consider the order in which they appear in the buffer. Failure to do so can result in artifacts or "dark spots" in the material.

If the geometry of the "heel" is convex, a quick fix may be to render only the front faces:

mesh.material.side = THREE.FrontSide;

For more complex geometries with transparent materials, alternative solutions may be necessary. One such approach is discussed in this answer;

Version three.js r.85

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

Step-by-step guide on accessing and displaying a disc file within a webix application

I am a beginner in webix development and struggling to find documentation or help for my current issue. Within my webix application, I am trying to create a button (let's call it 'View Report') that when clicked will open a file from my loc ...

javascriptjqueryhtmlwebix

Trouble with implementing Ajax in Express and jquery

My app has a browse page where users can add items as owned or wanted. Currently, when adding an item it redirects back to the general /browse page. However, I want the page to not refresh at all. I'm attempting to achieve this with ajax, but as a beg ...

javascriptjqueryajaxexpress

Reorganize the JSON data to match the specified format

{ "EUR": { "Description": "", "Bid": "1.1222", "Region": "", "Bid1": "1.1283", "CurrencyCode": "EUR", "FeedSource": "1", "Ask": "1.1226", "ProviderName": "TEST 1", "Low": "1.1195", ...

javascriptjqueryjsonjqgrid

Troubleshooting: Dealing with ng-click and invalid functions

Prior to resolving the issue, I encountered a component (within an HTML template) containing a ng-click that was invoking a nonexistent function. Is there a method to enable a strict mode (similar to 'use strict' in JS) or something equivalent t ...

javascriptangularjs

Converting an Ajax request from JavaScript to jQuery

I am new to Ajax and trying to convert an ajax request from javascript to jquery without success. Here is the javascript code snippet I am working with: function aaa(track_id) { var req = new XMLHttpRequest(); req.open("get", "list.php?tr=" + track_id, ...

javascriptjquerysqlajaxxml

Is Next.js experiencing issues with animating presence specifically for exit animations?

I'm facing an issue with adding an exit animation to my components in next js. Despite setting an initial animation, the exit animation doesn't seem to work as expected. Could someone please help me figure out what I'm doing wrong here? Be ...

javascriptcssreactjsnext.jsframer-motion

What causes a basic vec3 color parameter to experience interpolation in a fragment shader?

Working with Three.js has brought some unexpected results. While experimenting with attributes, I ended up with the following code: const colors = [ new THREE.Color(0xFF0000), new THREE.Color(0x00FF00), new THREE.Color(0x0000FF), n ...

three.jswebgl

One effective way to transfer state to a child component using function-based React

My goal is to pass an uploaded file to a child component in React. Both the parent and child components are function-based and utilize TypeScript and Material-UI. In the Parent component: import React from 'react'; import Child from './ ...

javascriptreactjstypescriptmaterial-ui

Managing the state in NextJS applications

I've scoured the depths of the internet in search of a solution for this issue, but unfortunately I have yet to come across one that effectively resolves it. I've experimented with various state management tools including: useContext Redux Zusta ...

javascriptreactjsreduxnext.jsstate

Prevent the creation of references to objects passed as function parameters in a separate list

I'm facing an issue with modifying items from an array and adding them to a new list of objects. The problem arises when I make changes to the item in the new list, it also reflects those changes in the original array. It seems like there is some ref ...

javascriptangularjs

Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists. What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

phpjavascriptmysqlhtmlajax

Vertical stability bar

I need help creating a vertically fixed navigation bar for my website. Currently, I am using a method that has been discussed in various posts: HTML: <html> <head> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

javascripthtmlcss

Conceal any zero values from an empty numerical input

Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...

javascripthtml

The process of automating e-signature input with Selenium

Is there a way to automate e-signature input in Selenium? I attempted using the action class to draw a line on the canvas object. Below is the code I used: Actions actionBuilder=new Actions(driver); Action drawOnCanvas=actionBuilder ...

javascriptjavaseleniumcanvas

The message "Temporary headers are displayed" appears in Chrome

After creating an API to remove images from a MongoDB database using GridFS, I encountered an issue when calling the API. The image is successfully removed, but it causes the server to stop with an error that only occurs in Chrome, displaying "Provisional ...

javascriptangularjsnode.jsmongodbgoogle-chrome

Performing calculations while transferring information via Mongoose to the MongoDb database

Seeking assistance with calculating a user's BMI and storing it in my MongoDB atlas database. The BMI will be determined based on the height and weight provided by the users. I have created a Mongoose Schema to define the necessary functions, but I am ...

javascriptnode.jsmongodbmongoosemongodb-atlas

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...

javascriptjquerycsshtml

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

javascripthtmlcsstypescriptnext.js

Discovering all jQuery functions employed in a JavaScript file can be accomplished through the utilization of regular expressions

I have a somewhat unconventional idea that I want to share. The project I'm currently working on has an old front-end codebase that is causing the website to run slowly, with jQuery being a major factor. My plan is to develop a tool that can analyze a ...

javascriptjqueryregex