Tips for eliminating wireframe diagonals from your design

After developing a custom CAD software exporter to transfer geometry data to the ThreeJS editor, I successfully created a loader to load the geometry. However, I encountered an issue when viewing the wireframe in ThreeJS - where triangles from each vertex were visible. I am now seeking a solution to remove the triangulation and diagonals. How can I display the wireframe without the diagonals?

Source 3D:

ThreeJS 3D: (triangles and diagonals visible)

javascriptmath3dthree.js

Answer №1

It appears that all the points/polygons are being drawn as a single polyline in your current process.

  • However, the correct approach is to handle each polygon as a line loop.
  • If your mesh is triangulated or quaded, then extracting the perimeter line is necessary.

Proper Extraction of Perimeter Line

  1. If your mesh is not polygon-based, group all connected primitives into a single polygon.
  2. Add all lines from the single polygon into a list.
  3. Detect and remove duplicate lines.
    • Any lines using the same points, regardless of order, are considered duplicates.
    • Shared edges indicate connected primitives.
    • This method is suitable for correctly triangulated polygons.
  4. Some triangulations may require line comparisons instead of point comparisons.
    • Identify parallel lines with the same or opposite angles.
    • Check if they lie on the same line and are connected (overlapping).
    • If so, trim the lines to eliminate the overlapping parts.

Dealing with Poor Triangulation

  • If the primitives overlap instead of being joined, draw a single polygon in a cleared buffer.
  • Process all lines in the buffer.
  • Calculate the midpoint for each line.
  • Determine if the coordinates are filled in the buffer.
  • If so, remove the line, although this method is not foolproof.
  • Consider testing more points along each line and, if necessary, find intersections to remove only the inside portion.
  • An alternative approach involves using vectors for the inside test, but handling multiple overlaps becomes more complex.

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

Implementing a JavaScript validator for an ASP textbox

I have come across many posts discussing how to prevent an ASP textbox from accepting only numbers. However, I am looking for a JavaScript example that can check if the entered value falls between 0 and 100. My validator currently checks if each key entere ...

javascriptasp.net

What is the best way to initialize a JavaScript constructor in AngularJS, similar to using ng-init to define variables but calling the constructor in service.js?

I need help converting this code to AngularJS. The current code is in core JavaScript and I want to call a core JavaScript constructor from AngularJS. I have successfully defined how to call the service constructor in core, but I am unsure of how to call i ...

javascriptangularjs

What is the best way to allocate values within a for loop?

I am in the process of designing an interface for individuals who have no background in programming. My goal is to allow them to input certain details, and then be able to simply copy and paste the code to make everything function seamlessly. Here is a sa ...

javascriptloopslogic

Escaping back slashes in Node.js

I am currently encountering an issue with escaping backslashes. Below is the code snippet that I have attempted. The problem lies in how to assign a variable containing an escaped slash to another variable. var s = 'domain\\username'; ...

javascriptnode.jsescapingbackslash

Ways to forward a webpage once validation has been completed

I have a login form that is being validated using jQuery/Ajax to receive a JSON response. The form calls a PHP page called add-data.php. Upon successful validation, I want to redirect to another page after displaying the message Successfully logged!: if ...

javascriptphpjqueryajax

Firebase Cloud Function variables causing 'unidentified' output

While experimenting with firebase cloud functions, I'm encountering an issue with a constant error message stating that userID is undefined. It's preventing the function from running smoothly. https://i.sstatic.net/MsnsV.png Below is the databa ...

javascriptnode.jsfirebasefirebase-realtime-databasegoogle-cloud-functions

Facing issues connecting index.js to the database in React and unable to resolve the problem

After creating a frontend for users to submit movie reviews to a database, I am now attempting to connect a MySQL database that I set up to the index.js file. My goal is to have the database populated with the first entry. I am working on achieving this by ...

javascriptmysqlnode.jsreactjsdatabase

What could be causing the render to not appear? Using Aframe with three object3D elements

I am having trouble rendering a threejs object in aframe. What steps should I take to successfully render the object? html <a-scene> <a-entity geometry material id="obje"></a-entity> <a-entity camera id="cam"&g ...

javascriptthree.jsaframe

Unit Testing JWT in Angular 2

Using JWT for authentication in my API calls. I am in the process of coding a service method. An interceptor is applied to all requests: public interceptBefore(request: InterceptedRequest): InterceptedRequest { // Modify or obtain information from ...

javascriptangularjasminekarma-jasmine

Is there a way to directly update the value of a nested object array using v-model in VUE?

Looking to update a value in JSON using v-model { class: "data.child", "myform.input1": [true, "<input1 value>"] } <input type="text" v-model="<what should be inserted here?>" > //update the value directly in my ...

javascriptjsonvue.jsvuejs2

Burst or displace meshes outward from the center

I am attempting to separate all the meshes that make up the loaded obj file from each other in order for the user to easily view each mesh individually. I am striving to replicate a similar functionality as shown in this example: Demo To achieve this ef ...

javascriptthree.jstesselation

When you press the back button and navigate to a different page, the scroll position will remain unchanged

I'm facing an issue with scrolling on my angularjs app. Currently, the app consists of 2 pages: The first page displays a list of customers, where you can select one to view their details. The second page is a list of companies, following a similar s ...

javascriptangularjsscrollinfinite-scroll

A guide to setting an href using variable values in jQuery through manual methods

I have a datepicker set up where each day, month, and year is stored in a variable. I then display this information in the desired format. Below is the jQuery code: jQuery(document).ready( function($){ alert('alert function'); var txtFr ...

javascriptjquery

Establishing a PHP session variable and then initiating a redirect to a new page through the HREF method

I am working on a table that pulls IDs from a MySQL table named auctiontable and displays them in rows. Currently, I can easily append ?aid="1"or ?aid="2" to the end of the href attribute to utilize $_GET. However, I want to prevent users from controllin ...

javascriptphphtmlmysqlsession

Bootstrap: when divs cover the jumbotron

I have recently started exploring bootstrap and have been using it to build a homepage for my website. However, I am facing an issue: The three images are overlapping the jumbotron section and I can't seem to figure out why. Below is the HTML code sn ...

javascriptjqueryhtmlcsstwitter-bootstrap

Function for masking phone numbers is adding additional "x's" to the input field

My phone number formatting script is supposed to add dashes after the third and sixth characters, as well as insert an "x" after the 10th character for extensions. However, it is adding extra "x's" after the 12th character, resulting in the incorrect ...

javascriptjqueryhtmlmasking

Unable to access the value of an undefined property

In my HTML view, I have the following code: <form name="adduser" id="signupForm" novalidate> <span>First Name</span> <label class="item item-input" id="profileLabel"> <input id="profileInput" type="text" ...

javascriptangularjsionic-framework

Perform an action when the timer reaches zero

I am working with a database entry that contains the following information: { _id:"fdjshbjds564564sfsdf", shipmentCreationTime:"12:17 AM" shipmentExpiryTime:"12:32 AM" } My goal is to create a timer in the front end ...

javascripthtmlnode.jsreactjsweb

Confirmation message is displayed upon clicking to delete a row in the editable Gridview, prompting the user to

One issue I am facing is with a Delete button in an editable Gridview on my ASP.NET application. When the delete button is clicked, it triggers a function that displays a confirmation popup asking the user for feedback on whether they want to proceed with ...

javascriptasp.net.netgridviewconfirmation

What is the process of creating Vue.js single file components and incorporating them into a non-single page application?

Currently, I am in the process of developing a web application (specifically ASP.NET Core 2 MVC) that is not a single page application. Vue.js is being used to enhance the front-end functionality through a Vue instance. As the project progresses, there is ...

javascriptvue.jsvuejs2vue-component