Eliminate repeating facial features from an Array of facial structures using Three.js

I am currently grappling with the task of eliminating duplicate faces from an array of faces. I've made an attempt at some code, but I find myself stuck on how to complete it.

One thing that caught me off guard was this:

new THREE.Vector3(0,0,0) == new THREE.Vector3(0,0,0)

The above comparison evaluates to false (though I would have expected it to be true). Similarly, the following snippet also results in false (once again, against my expectation of true).

    var triangleGeometry = new THREE.Geometry(); 
    triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  1.0, 0.0)); 
    triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
    triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
    triangleGeometry.faces.push(new THREE.Face3(0, 1, 2)); 

    var triangleGeometry2 = new THREE.Geometry(); 
    triangleGeometry2.vertices.push(new THREE.Vector3( 0.0,  1.0, 0.0)); 
    triangleGeometry2.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
    triangleGeometry2.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
    triangleGeometry2.faces.push(new THREE.Face3(0, 1, 2));

    triangleGeometry2.faces[0] === triangleGeometry.faces[0] - leads to a false result

In terms of my strategy for determining if a face already exists within an array of faces, here's what I've come up with:

            function faceInArray(arrayOfFaces,face)
            {   
                for(let i = 0; i < arrayOfFaces.length; i++)
                {
                    vertexaFaceFromArray = buildingGeometry.vertices[arrayOfFaces[i].a]
                    vertexbFaceFromArray = buildingGeometry.vertices[arrayOfFaces[i].b]
                    vertexcFaceFromArray = buildingGeometry.vertices[arrayOfFaces[i].c]

                    vertexaFace = buildingGeometry.vertices[face.a]
                    vertexbFace = buildingGeometry.vertices[face.b]
                    vertexcFace = buildingGeometry.vertices[face.c]

                    // Still unsure about comparing the vertices effectively

                }
            }

At this point, I'm uncertain about the next steps. Simple comparisons like vertex1 == vertex2 aren't yielding the desired outcomes, as demonstrated earlier. Would breaking down the coordinates of each face be necessary for comparison? Also, does the order of vertices play a crucial role?

Answer №1

Why this method fails:

new THREE.Vector3(0,0,0) == new THREE.Vector3(0,0,0)
The reason behind this is that the operator == here checks if two values point to the same object. However, in this scenario, your vectors are distinct objects with identical x, y, and z values. To address this, you should utilize three.js' equals function on Vector3:

new THREE.Vector3(0,0,0).equals(new THREE.Vector3(0,0,0))

Hence, your function can proceed like so:

function checkFacesInArray(arrayOfFaces, face) {
    for(let i = 0; i < arrayOfFaces.length; i++) {
        vertexaFaceFromArray = buildingGeometry.vertices[arrayOfFaces[i].a]
        vertexbFaceFromArray = buildingGeometry.vertices[arrayOfFaces[i].b]
        vertexcFaceFromArray = buildingGeometry.vertices[arrayOfFaces[i].c]

        vertexaFace = buildingGeometry.vertices[face.a]
        vertexbFace = buildingGeometry.vertices[face.b]
        vertexcFace = buildingGeometry.vertices[face.c]

        if (vertexaFaceFromArray.equals(vertexaFace) && 
            vertexbFaceFromArray.equals(vertexbFace) && 
            vertexcFaceFromArray.equals(vertexcFace)) {
            return true;
        }
    }
    return false;
}

Nevertheless, this only confirms if each face contains vertices in the exact sequence as the input face. Based on your specific requirement, keep in mind that face (1, 2, 3) is interchangeable with faces (2, 3, 1) and (3, 1, 2).

In addition, in scenarios where your faces are double-sided, they will be considered equal in any vertex order such as (3, 2, 1), (2, 1, 3), and (1, 3, 2). Thus, it may be necessary to enhance the code to accommodate these variations too.

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

Having trouble with a JavaScript Promise that seems to be stuck in limbo

I have developed two custom promises that are quite similar, with the only difference being that they operate on distinct user inputs. Both promises utilize various classes and methods from Google Maps API v-3. What's puzzling is that when the first ...

Guide: Building a Dropdown Form in Angular 2

I have a webpage with an HTML form that includes a button positioned above the form. I am interested in adding functionality to the button so that when it is clicked, a duplicate of the existing form will be added directly beneath it. This will allow for m ...

Access the session on both routers

I currently have 2 different routers set up in my application: Router 1 app.post('/consultations', function(req, res) { req.session.name = 'administrator'; console.log('test', req.session.name); // the session is pro ...

Ensuring that each object in a list contains an optional key if any one object includes it is a task handled by Joi validation

My dataset includes various objects that must have certain keys: Date, Time, Price I am looking to include an optional key "order" for these objects. If one of them has the "order" key, then they all should. Is there a way to validate this using joi? ...

I'm currently attempting to incorporate the Material-UI InfoIcon into my code, but I'm unsure of how to properly integrate it within a TextField component

I am attempting to integrate the Material-UI InfoIcon into my TextField code, but I'm unsure of how to go about it. Here is the snippet of Material-UI code: <InfoIcon fontSize="small" /> This is where I would like to place it: <Grid item ...

Populate a 2D array in JavaScript/NodeJS "line by line"

Hey there! I could really use some help with JavaScript/NodeJS arrays. Here is the code I'm working with: let arr = new Array(); arr = { "Username" : var1, "Console" : var2, "Pseudo" : var3, } console.log(arr); The variables var1, var2, ...

Tips for showing or hiding the router-link button in a particular Vue.js component

Currently, I have implemented router-link as a button to switch between various components. However, I am interested in exploring ways to hide a specific component. <router-link :to="{path: prevPage }" tag="button" class="btn btn-primary"> ...

Having trouble with parsing JSON data using jQuery?

I am currently working on retrieving a result set using postcodes with jQuery autocomplete. However, the code I have implemented seems to be displaying an empty set of rows. <html lang="en"> <head> <meta charset="utf-8> <title>Ausp ...

Tips for retrieving element height using Vue.js

I am attempting to retrieve the offsetHeight of an element but I keep getting undefined. When I use this code, it returns an HTML collection and everything works correctly: document.getElementsByClassName("plyr--full-ui"); https://i.sstatic.net/xurBa.pn ...

A guide to dynamically adding an HTML class using JavaScript

I have a login page with a text field for email and password, styled using the Bootstrap framework. I want to change the border color of the input field from grey to red when it is empty and the user clicks the login button. I tried implementing the code t ...

Methods to retrieve an array's value list dynamically using the 'id' in Vuejs

**User.vue** <template> <div> <div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div> </div> </template> <script> import { datalist } from "./datalist"; export default { name: "User ...

Storing table rows in an array using Javascript

I've encountered a situation where I have a PHP script generating a string of table rows that is then returned via an AJAX request. This generated string consists of all the content enclosed within the tbody tags (<tr>1</tr><tr>2< ...

JQuery Anchor Link Scrolling Problem on Specific Devices

I'm having an issue where my webpage does not scroll correctly to an anchor when a link is clicked. The problem arises from the header size changing based on the viewport width. While it works fine in desktop Chrome, in the mobile version the header h ...

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

Here is the HTML code snippet controlling the tab presentation: <li class="presentation" ng-show="currentUserAuthority == LIBRARIAN" > However, there seems to be an issue with the variable "currentUserAuthority" not updating until after the web pag ...

In JavaScript, a prompt is used to request the user to input a CSS property. If the input is incorrect,

Implement a while loop that continuously prompts the user to enter a color. If the color entered matches a CSS property such as blue, red, or #000000: The background will change accordingly, but if the user enters an incorrect color, a message will be dis ...

Step-by-step guide to tweeting with Codebird PHP from a pop-up window

I want to enhance the visitor experience on my website by allowing them to easily post a tweet with an image directly from the site. To achieve this, I have implemented the Codebird PHP library. While everything is functioning correctly at the moment, ther ...

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

I am using the Date Picker component from Material-UI for React JS to display selected dates in a table. However, I am encountering an error when trying to show the date object in a table row. Can anyone provide guidance on how to achieve this? import ...

A dynamic context menu using jQuery within AJAX-loaded content

After spending hours searching for a solution without success, I am turning to this forum for help (I have come across similar questions but none of them have solved my issue). The problem I am facing is with implementing a custom context menu on a page t ...

The chosen option does not display any information

I am new to databinding an html control using ajax for the first time. After checking and debugging my ajax call, I can see that the data is retrieved successfully, but it does not show up in the select option. My javascript code is positioned at the botto ...

Having trouble integrating an HTML template using JavaScript

I am currently attempting to integrate the HTML code of my website using data-prototype: <div id="accordion" data-prototype=' <div class="card-body"> <textarea id="solution_answers___name___content" name=& ...