Strange behavior of a occluded object in three.js

After utilizing the three.js library, I successfully displayed occluded edges of a 3D object as dashed lines.

Now, my goal is to make edges occluded by other objects behave in the same manner.

Although the solution provided here is functioning well, there are some unusual cases where it fails to work properly.

Below is an example of such a case (I am using an orthographic camera so the distance between objects is not clearly visible, hence the text in the image):

Has anyone else encountered a similar issue before?

Can anyone pinpoint why this particular scenario is causing problems?

Perhaps the section 

polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1
in my code is being misused.

Or could it be that side: THREE.DoubleSide in my material is creating the issue? I have noticed it behaving strangely with transparency in the past.

Here is my code: http://jsfiddle.net/car3v/4/

javascriptthree.jswebgl

Answer №1

To ensure visibility, the object featuring dashed lines and the material's depthTest: false must be positioned in front to avoid being obscured by a mesh of a "plain" object. I resolved this issue by setting 

dashed_object.renderDepth = 9007199254740992;
manually, utilizing the maximum integer value possible in JavaScript, resulting in the desired functionality.

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

Ways to refresh the count of newly added div elements

Currently, I am working on a socket chat program that requires a badge to display the number of users in the chat room every time a new user joins. The code snippet provided below shows a function that adds the name of the new user to the list. The added n ...

javascriptjquerynode.jssockets

Exploring Angular 2: Unveiling the secrets of lifecycle hooks in lazy loaded

Currently, I'm working on an application that involves lazy loaded Angular modules. I have a straightforward inquiry: Is there a way to detect an event once a module is loaded? For instance, similar to the OnInit lifecycle hook for components. I fo ...

javascriptangularmodulecomponentslifecycle

Jquery form calculation not matching up

I've been struggling to make this jQuery math function work with my form. The snippet works fine, but when I try to integrate it into the actual form, I can't seem to get it aligned properly to perform the required calculations. Any suggestions ...

javascriptjqueryhtml

Determine if the browser displays <select multiple> as a modal dialog

Is it possible to use JavaScript to detect whether a specific browser displays a focused <select multiple> element as a popup or strictly as an inline box? On certain platforms, like the Android Browser and iOS Safari, the appearance of a popup can ...

javascripthtmlselectcross-browserbrowser-feature-detection

Codeigniter 3 and JQuery seamless refresh: A dynamic duo

I'm currently attempting to utilize the following code: setInterval(function() { $('#myDiv').load('contentToLoad.php');}, 5000); while working with CodeIgniter. My attempt so far has been: setInterval(function() { $('.image ...

javascriptphpjquerycodeigniter

Getting Observable Centered Text in Angular with Chart.js

I have implemented ng2 charts and chart.js to create a doughnut chart. One of my requirements is to center text inside the doughnut chart, and I have tried the following approach: https://stackblitz.com/edit/ng2-charts-doughnut-centertext?file=src%2Fapp% ...

javascriptangularcharts

Discover the visibility of an element through monitoring DOM manipulation with Selenium

Is it possible to monitor a webpage for events such as when an element becomes visible? Can this be achieved using Selenium? For instance, if I set a timeframe to watch a webpage from startTime to endTime, various page events could be recorded, including ...

javascriptjavahtmlseleniumdom

Traversing an array of objects in TypeScript and appending to a separate array if not already present

I have been given an array containing objects in the following format: export interface Part { workOrder?: string; task?: string; partNumber?: string; qty?: number; image?: string; name?: string; } My goal is to loop through each object in th ...

javascriptarraysdatabasetypescriptobject

The function insertAdjacentHTML does not seem to be functioning properly when used with a

I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an ex ...

javascripthtmlcss

What is the process for reading server responses following the delivery of an alert to a designated user through socket.io?

Recently, I started exploring Socket.io and encountered an interesting challenge. My goal is to retrieve real-time location data from an Android device. To achieve this, I developed a basic application to access the current GPS coordinates. Additionally, I ...

javascriptandroidnode.jssocketssocket.io

Implementing Othello Minimax Algorithm in React.js Yields Unsuccessful Results

I need assistance with a recurring issue where the AI player consistently plays the first available move it encounters. My objective was to implement an AI using the Minimax Algorithm, but I'm facing challenges in achieving the desired functionality. ...

javascriptreactjsminimax

What is causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

javascripthtmlsvg

Concern regarding the width of select forms in Internet Explorer

When coding a select dropdown box using simple HTML, I encountered an issue where it displayed properly in Google Chrome and Firefox, but not in Internet Explorer. In IE, the dropdown became too long and extended out of the box. I attempted to set the wid ...

javascripthtmlcssinternet-explorerbootstrap-4

Ways to include additional details in each row of an autocomplete feature

I have successfully implemented autocomplete for venues worldwide, but now I want to display the address of each venue below its name. For example, if the autocomplete suggests the venue name as ABCD, I want the address of that venue to appear right benea ...

javascriptjqueryautocomplete

Manipulate array of observable data structure in Angular using RxJs filter function

I am working on filtering observable nested arrays in Angular using the filter function in combination with the pipe function of the RxJs library. Inquiry: I am looking to display only categories with surveys conducted on a specific date. Simplified scen ...

javascriptangularrxjs

What is the process for removing information from Firebase?

I am currently working on a project using Firebase along with AngularJS. The issue I am facing is deleting a randomly generated ID in the Realtime Database. var todoFirebaseID; // Insert Firebase $scope.addFirebase = function() { var objects = { ...

javascriptangularjsfirebasefirebase-realtime-databaseangularfire

Unlock the Power of JavaScript: Understanding Multidimensional Input Field Array Indexing

Here is a sample HTML form with multidimensional input fields. <tr> <td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td> <td><input name="diameter[0][bottom]" type="te ...

javascripthtmlarrays

JavaScript callback animations utilize a callback function to trigger animations

I have created a custom animate function using three.js for 3D rendering. When clicking on the screen, the cube rotates based on the animation described in the function call. However, I noticed that if the cube is already animating under one animation and ...

javascriptanimationcallbackthree.js

Verify if any column within a JSON object has a value of undefined, null, or is empty

Hey there, I'm a newcomer here and couldn't find any information on this topic after searching. Is there a method to scan a JSON object for empty values? For example, is there something like if(json[randomInt()].hasBlanks) that can be used? Or d ...

javascriptjqueryjson

What is the best method for adding a   character within the @Html.DisplayFor() method when referencing m.EventDetailSection.ContactAccountTel?

At the moment, my code looks like this: @Html.DisplayFor(m => m.EventDetailSection.ContactAccountTel), which displays the phone number without any spaces, such as +3194949494. I want to format it with spaces after every 2 numbers and then after every ...

javascriptc#html.netdisplayfor