Interactions between faces in Three.js causing artifacts

I have successfully created two transparent boxes that are positioned so their faces touch. However, the issue arises when the faces of the boxes actually touch.

// inner object
var mesh2 = new THREE.Mesh(geometry, material); 

mesh2.position.x = 0;
mesh2.position.y = 0;
mesh2.position.z = 0;

mesh2.scale.x = 100;
mesh2.scale.y = 50;
mesh2.scale.z = 100;

scene.add( mesh2 ); 

// outer object
var mesh1 = new THREE.Mesh(geometry, material); 

mesh1.position.x = 0;
mesh1.position.y = 0;
mesh1.position.z = 0;

mesh1.scale.x = 100;
mesh1.scale.y = 100;
mesh1.scale.z = 100; 

scene.add( mesh1 );

You can view the code here: http://jsfiddle.net/unkya/14/

Is there a solution to remove these artifacts while still maintaining the touching faces?

Additionally, is there a method to add the boxes to the scene without requiring the insertion of the innermost ones first?

Your help is greatly appreciated!

Answer №1

Known as z-fighting, this issue occurs when two objects in a 3D scene overlap or have very similar depth values.

To resolve this problem, there are two effective solutions available.

One approach is to introduce a slight offset to the depth values, such as 0.01, to prevent the flickering effect. It's crucial to ensure that the camera's near and far planes are set within appropriate ranges.

Alternatively, you can utilize the polygonOffset property in THREE.js materials. By adjusting this setting, you can establish a specific rendering order for objects, akin to a z-index operation. Remember to enable transparency, especially for semi-transparent objects like cubes.

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

What is the proper way to integrate EJS tags within script tags in EJS files?

I am encountering an issue with the code in my index.ejs file from YelpCamp, which is a part of Colt Steele's course. const campgrounds = <%- JSON.stringify(campgrounds) %>; I attempted to fix it by changing the code to: const campgrounds = &ap ...

The UI bootstrap dropdown toggle requires two clicks to reopen after being manually closed

Utilizing the UI Bootstrap drop-down element to display the calendar from angular-bootstrap-datetimepicker upon clicking. Additionally, a $watch has been implemented to close the dropdown once a date is chosen. Access the Plunker here <div uib-dropdow ...

Retrieve the subdomain from within the passport FacebookTokenStrategy and GoogleStrategy

In the process of developing a node.js application with wildcard subdomains, I am creating separate parts of the app for each subdomain that will have distinct user authentication based on the subdomain. For instance, envisioning my app having subdomains ...

Ways to obtain every image placed onto an element

Using the img tag within div.image-block sets a background. Images can be added to .block3 through drag and drop. Is there a way to create a container that includes all elements from .image-block? <style> .image-block { position: relat ...

Checking the accuracy of pixels in an image

How can I check the width and height of an image upload in AngularJS? For example, if the width is greater than 200 pixels and the height is greater than 200 pixels, it should show an error. How can I achieve this using AngularJS? HTML <div class="for ...

Is it possible to trigger a reflow prior to initiating a lengthy JavaScript operation?

Ready to face the criticism, I understand that this question has been asked many times before, and I am aware that there are likely more efficient ways to achieve what I'm trying to do... In a JavaScript function, I have a process that can take up to ...

Limitations of jQuery: onClick function not transferable

I am struggling to achieve the following functionality for my navbar dropdown menus: When the screen size is greater than 992px, I want the navbar dropdowns to open on mouse enter. For screens smaller than 992px, I want the dropdowns to open on ...

What is the method to apply the active class to pagination when the page is initially loaded on the first page?

I am facing an issue with setting the active class when not paging, specifically when the user is on the first page. The idea is that when a user visits the posts page, the default active pagination should be 1. Below is the code snippet I am using: let pa ...

"Improvements required for the search and filter functionality in the JSON

My JSON function retrieves image data and displays it in panels. Here is an example of the code: $.getJSON('iproducts.json',function(products){ var output = ""; $.each(products.appleitems, function(i, product) { output += "<di ...

Is it possible to streamline the chaining of promises generated from MongoDB queries?

This feature allows for the display of all collections in a MongoDB database, along with the count of documents in each collection using bluebird promises. function displayMongoCollections(db) { var promises = [] db.listCollections().toArray().the ...

What is the best way to convert a string value such as '20180131T120000Z' into a Date object?

Can anyone help me figure out how to parse the following String date format (yyyyMMddThhmmssZ) to Date? const date = Date.parse("20171201T120000Z"); console.log(date); The result I'm getting is NaN. What would be the most efficient method to achieve ...

Problem with Jquery HTML CSS Slideshow

Currently I am working on integrating two sliders into one webpage using the demo available at . One of the sliders is customized from the Linking demo and I have named them slider1 and slider2 with different styling using global.css for slider-1 and text. ...

What steps can be taken to ensure a dropdown selection is required when a specific variable is true?

How can I create an AngularJS dropdown that requires a selection only when a specific variable, such as 'x', is set to true? If 'x' is false, it should allow saving without a selection. Below is the code for my dropdown: <select cla ...

What is the best method for transferring states between components?

When it comes to React JS, I am a beginner looking to develop a ToDo list application. In my project, I have the main page App.js, where I created the component MainBlock. This MainBlock component structures the layout into left and right sides. On the rig ...

Potential issue with Jhipster: loading of data could be experiencing delays

I've encountered an issue with getting my chart to display properly. I am working on creating a chart using ng2-charts, where I retrieve data from a service and then display it on the chart. The problem arises when the data is not correctly displayed ...

Guide to importing a JavaScript module using jQuery

I have been encountering an issue while loading a javascript file using jquery. The code I am working with is as follows: // file application.js $.getScript("module.js", function(data, textStatus, jqxhr) { ... }); Everything seems fine so far. However, t ...

Implementing alphabetical pagination in PHP

I am trying to implement alphabetical pagination in php, but I am facing a problem. When I click on any alphabet, the selected alphabet shows up in the address bar, however, the data starting from the selected alphabet is not displayed. Here are my databa ...

Retrieve JavaScript functions as JSON or text in AngularJS and execute them

Currently, I am working on developing an AngularJS application and have come across a particular challenge that needs to be addressed: After making a web service call, I receive JavaScript code that looks like this: { "script":"function foo(a, b) { c = ...

Divide the inner HTML content to extract text for translation purposes using JavaScript

I am currently developing an application that requires extracting the innerHTML of Body, then extracting the text in a JSON format. This JSON will be used for translation, and the translated JSON will be used as input to recreate the HTML markup with trans ...

Prevent the click event on an Angular component

I am currently utilizing the component found on this link: I have not been able to locate a function or property that disables the component state, making it impossible to select dates on the calendar. Due to this limitation, I am interested in learning ...