Dividing Faces with Lengthy Edges in three.js into Two Separate Faces

I am currently working on a script that involves splitting overly long edges of faces into two separate faces instead of one large face.

The final result is exported to a .obj file.

Although the geometry reduction works fine, I have noticed some issues after rendering. The reduced faces exhibit incorrect light reflection and some faces are not displayed properly in WebGl events. Link to Example

For the new (child) faces, I am saving the normals and all properties from the parent big face.

Below is the code snippet:


var loader = new global.THREE.OBJMTLLoader();
var geometry = loader.load("source.obj").children[0].geometry;

var uvs = [];
var limiter = function () {
    // Code for edge splitting and face creation
};

limiter();

geometry.computeFaceNormals();
geometry.computeVertexNormals();
geometry.computeMorphNormals();

var exp = new THREE.OBJExporter();
console.log(exp.parse(geometry)); 

P.S. If anyone is aware of an existing solution for this issue, please let me know.

Answer №1

To divide faces with edges longer than a specified length into two faces, simply utilize the THREE.TessellateModifier found within the examples/modifiers directory.

If desired, you can repeatedly invoke the modifier as follows:

var tessellateModifier = new THREE.TessellateModifier( LENGTH );

for ( var i = 0; i < N; i ++ ) {

    tessellateModifier.modify( geometry );

}

Version three.js r.69

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

Challenges with the Sumo Select Refresh Feature

I am having trouble with Sumo select not refreshing the data properly. The action method is returning the correct list, but it seems like the JQUERY multi-select rebuild() function is missing. Is there something I'm overlooking? $("#ddlCountry&q ...

Guide to successfully downloading an xlsx file in angular through express

I am creating an xlsx file based on user input within the express framework. The data is sent via a post request and I intend to send back the file content using res.download(...). However, when I do this, the data field in my ajax response ends up contai ...

Insert HTML content into an iframe with a callback function

We are receiving information from the backend server and need to transfer it to an iframe. In order to accurately set the height of the iframe to match the content, we must wait for the content to be loaded into the iframe. However, this process may not ha ...

Integrating Javascript and JQuery in Reactjs: A Comprehensive Guide

Currently, I am working with ReactJS and utilizing the Next.js framework. My goal is to implement the provided code snippet in index.js to display data (day, month, etc.). How should I go about achieving this? Here is the code snippet: <script> fun ...

"Encountering a "404 Error" while Attempting to Sign Up a New User on React Application - Is it a Routing or Port Problem

While working on my React-Express application, I'm facing a "404 (Not Found)" error when attempting to register a new user. It seems like there might be an issue with routing or configuration of the Express server. Being new to React and Express, it&a ...

Achieving the validation with a bold red border

Hi, I'm currently learning React and I've been using regular JavaScript to validate my form. Here's a snippet of how I'm doing it: <TextField label="Title" variant="outlined" si ...

Creating a custom component in Angular 2 that includes several input fields is a valuable skill to have

I have successfully created a custom component in Angular 2 by implementing the CustomValueAccessor interface. This component, such as the Postcode component, consists of just one input field. <postcode label="Post Code" cssClass="form-control" formCon ...

Using jQuery to create clickable images by enclosing them in an `<a>` tag

How can I make each image with a specific class clickable? I would like jQuery to: Retrieve the src attribute of the image. Enclose the image within an a href tag that includes that src URL. .clickable { padding: 20px; border: 1px ...

Is there a different option available in place of the JavaScript confirm function?

I developed an application where I heavily utilized the javascript confirm function. confirm("Do you want to proceed"); However, I am not satisfied with the default appearance of the confirm dialog and would like to implement a customized version with be ...

Navigating CSV-derived JSON data in Flask and Javascript: Best Practices

My current goal is to read a CSV file on the backend using Python/Flask and then display its data as an HTML table with Javascript. I have simplified my task to just displaying JSON values passed from Python in the browser console, which will help me build ...

`Inconsistent form variable behavior persists despite multiple ajax requests`

I'm in the process of creating a basic email submission form and I've decided to use ajax for it. The issue I'm encountering is that after successfully submitting the form once, any subsequent modifications made to the text within the form a ...

What are some ways to manipulate JSON data following a successful AJAX request?

I've been grappling with this issue for quite some time now, trying various methods without any success. I won't bore you with the details of my failed attempts, but instead, I'll show you the code I'm currently working with. Here' ...

Retrieving JSON data with jQuery's Ajax functionality

I'm currently developing a web application to handle the administrative tasks for a restaurant. The main functionalities include creating new orders, adding order items, and managing financial overviews. One of the key features is the ability to view ...

The isotope plugin import failed, displaying the error message "The function $(container).isotope does not exist."

I've been struggling to get the Metafizzy Isotope plugin to work, but I'm having no success. The Network tab indicates that it's not loading properly. After installing isotope-layout and requiring it in my main-file.js, the code still doesn ...

jQuery fade in problem or alternate solutions

When I send a post request to a file and input the response into id='balance', I would like it to have a flickering effect or fadeIn animation to alert the user that it is being updated in real time. I attempted to use the fadeIn() method but it ...

Is there a specific minimum height that should be set for the equalHeight function to apply?

Despite trying everything, I can't seem to achieve the dreadful layout my designer has given me without using JavaScript! The issue lies with the positioning of the div #backgr-box, which needs to be absolutely positioned behind the #contenuto ( ...

Despite the headers being in place, the node is still the point of

I am facing an issue with two URLs residing on the same server, mydomain.com and api.mydomain.com In order to handle access-origin in my API, I have included the following code snippet: app.use(function (req, res, next) { // CORS headers res.head ...

Having difficulty with Mongoose in MongoDB when trying to retrieve an array of strings that match existing collections in the database

I've designed a helper function that is supposed to generate a promise containing an array of strings that represent all the names of Collections currently stored in my database. After conducting console logs, I confirmed that my connection to the da ...

Authentication with Laravel and Vue.js

After successfully implementing Laravel-Vue.js Authentication using Passport API, I am now able to obtain the token and send requests to api/user. Initially, I used the normal authentication process by sending data through a POST request to /login, which r ...

Looking to display a div with a unique timer?

Is there a way to display different divs with unique classes for specific durations of time? For example, I want one div to show for 2000 ms with the class 'one', then another div to show for 4000 ms with the class 'two', followed by a ...