Calculating the area of neighboring triangles using Three.js

Looking to determine the area of triangles surrounding a specific vertex within a mesh using Three.js.

I am aware that in three.js, faces represent the connections between vertices in a mesh. However, I have yet to find an effective method for identifying the indices of all triangles adjacent to a given vertex.

The code snippet provided below is my current solution, but when dealing with a large mesh consisting of more than 16,000 unique vertices and over 5,000 faces, the loop iteration exceeds 80 million times, leading to significant delays.

In addition, the conditional statement within the loop which checks whether the 'a', 'b', or 'c' position in a face matches the current vertex being processed does not yield the correct results.

var objectFace = object.geometry.faces;
var objectVertex = object.geometry.vertices;

    for( var m = 0; m < objectVertex.length; m++ ) {
        for( var q = 0; q < objectFace.length; q++ ) {

            fArray = objectFace[q];

            if ( fArray.a = m || fArray.b = m || fArray.c = m ) {
            var va = fArray.a;
            var vb = fArray.b;
            var vc = fArray.c;

            var v1 = objectVertex[va];
            var v2 = objectVertex[vb];
            var v3 = objectVertex[vc];

            var vec1 = [( v2.x - v1.x ), ( v2.y - v1.y ), ( v2.z - v1.z )];
            var vec2 = [( v3.x - v1.x ), ( v3.y - v1.y ), ( v3.z - v1.z )];

            //calculate triangle area using Heron's equation
            //store area values in array

        }
    };
};

To calculate the area, one must perform a cross product of the two vectors and apply Heron's equation accordingly.

Your assistance on this matter would be highly appreciated.

*ps My JavaScript abilities may not be top-notch, hence why this approach was devised.

Answer №1

If you're aiming to perform this operation on all vertices, consider iterating through the faces and adding up the results for each corresponding vertex rather than going through every vertex and face to sort out non-incident faces:

[Pseudocode]
for each face
    a := calculate face area
    areas[face.first vertex] += a
    areas[face.second vertex] += a
    areas[face.third vertex] += a
next

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

Tips for ensuring that a nested object in an array contains only a single object

My array is structured like this: [ { object1:{ childObj1:[grandChild1,grandChild2], childObj1, childObj1} }, { object2:{ childObj1:[grandChild1,grandChild2], childObj1, childObj1} }, { object3:{ childObj1:[grandChild1,grandChild2 ...

Vuex getters not displaying expected values in computed properties until entire page has finished loading

When working with computed properties using data fetched by the mapGetters function in my Vuex store, I always encounter the issue of getting an undefined value until the entire page or DOM is fully loaded. For instance, I have an example of an isRegister ...

Could the `<script src="show.js"></script>` code pose a threat?

Upon delivering a webpage, a software engineer included the subsequent line of code towards the end: <script src="show.js"></script> We are uncertain if adding this code to our webpage poses any risks. What could be the legitimate reason behi ...

There was an error of TypeError found in the views/welcome.ejs file during the e

I have embarked on creating a chat application, where I intend to store data in the following format {"name": "luxii", "chat": "blah blah", "chat": "more blah" } However, the code I wrote is throwing the following error. TypeError: /home/admin/session/v ...

Discovering nearby data in an array of objects using MongoDB

My goal is to extract a specific object from an array within a database document by using the wildcards $near and $geometry. The model I am working with looks like this: const schema = new mongoose.Schema({ name: {...}, email: {...}, ... locations: [ ...

When the page loads, sorting by numbers will automatically occur without requiring a click event

Hey there! I've got a modal set up for displaying event details like the one shown in this image: https://i.sstatic.net/73xTW.png Within this modal, users have the option to accept, reject, or leave events pending. In our API, the status values corre ...

Wait until the user submits the form before activating Angular validations, and do not display any validation messages if the user deletes text from a text box

I am looking to implement angular validations that are only triggered after the user clicks on submit. I want the validations to remain hidden if the user removes text from a textbox after submitting it. Here is what I need: - Validations should not be dis ...

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

I've been attempting to integrate a map from the Google Maps API and a combobox popover from @reach/combobox within a MUI dialog component. However, I've encountered an issue where the combobox popover isn't displaying. After some investigat ...

Animation that increments to a predetermined value

I'm trying to create a counter animation that dynamically animates a value calculated by the checkboxes selected. The calculation is working fine, but the animation is not happening. http://jsfiddle.net/dbtj93kL/ $('input[type="checkbox"]&apo ...

Reloading and redirecting web pages with PHP and Ajax techniques

I am currently working on a registration form in PHP. I have implemented validations for the input fields and used AJAX to handle the form submission. Everything seems to be functioning properly, except that when the submit button is clicked, the success ...

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

Implement vertical navigation arrows in a Bootstrap accordion using JavaScript

Snippet of my HTML code: <div class="panel" style="margin-left: -15px;"> <div class="panel-heading"> <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysi ...

I am currently attempting to generate a chart that displays information on countries utilizing the restcountries API. Despite being a beginner in this area, I have encountered some challenges and am seeking guidance

I'm struggling to display detailed information for each country separately. Whenever I try to loop through the data, all the contents end up getting merged into a single cell. What can I do to achieve the desired result? https://i.stack.imgur.com/dZS ...

Troubleshooting the issue with the sequelize hasOne association in Node.js

In my Node.js application utilizing Sequelize to access the database, I have tables named Products, Users, Carts, and CartItems. There are relationships between these tables: Product.belongsTo(User, { constraints: true, onDelete: 'CASCADE' }); ...

Is it possible to utilize a utility function to modify the state of useState during the

I have a small function for handling uploads that looks like this: const handleUploadPhoto = filename => { setHasImage('has-image'); setPostButtonState(''); onAddedPhoto(filename); setPostImageFilename(filename); }; I find m ...

Generate a dynamic nested JSON structure in real-time

(context)I am currently gathering data from various elements to create a JSON object that will be passed down to an MVC3 controller for deserialization. Within the JSON object, there are both 'items' and 'item settings'. At the moment, ...

Ensure that the authorization header is properly set for all future client requests

I need help figuring out how to automatically set the "Authorization: Bearer ..." header for user requests. For example, I save the user to the database, generate a token, and send a welcome email with the token : await user.save() const token = await use ...

The live() function is causing issues with my ajax request

Within my webpage, I have a link with an onclick() event that should display a div containing a date input text named "datepicker0", followed by another div with the id of "bContent". I've included the script below to implement a date filter on the d ...

Javascript adds a comma after every postback event

This particular JavaScript code I am incorporating helps in expanding and collapsing nested grid views. <script type="text/javascript"> $("[src*=plus]").live("click", function () { $(this).closest("tr").after("<tr><td></td ...

Unexpected behavior in VueJS code - troubleshooting the issue

In my VueJs code, I have a simple task list with completed and incomplete tasks. When I check or uncheck the box, the task should move to the appropriate list. var app = new Vue({ el: '#vueapp', data: { tasks: [{ id: 1, ...