Eliminating replicated vertices in a Three.js geometry model

I'm struggling with removing duplicate vertices from a SphereGeomerty. I need to eliminate the seam on one side of the geometry as it doesn't align properly when updating the vertex positions.

The issue arises when attempting to create a new geometry with a filtered list of vertex positions, resulting in an error:

[.Offscreen-For-WebGL-000001B883B499D0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out-of-range vertices in attribute 0

It becomes even more perplexing because if I revert to using the original vertex list for the BufferGeometry, nothing is rendered but the error disappears:

let positions = sphere.attributes.position.array;
filteredGeometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );

My method for filtering vertices is as follows:

function removeDuplicateVertices(vertices) {
    var positionLookup = [];
    var final = [];

    for( let i = 0; i < vertices.length-3; i += 3 ) {
        var index = vertices[i] + vertices[i + 1] + vertices[i + 2];

        if( positionLookup.indexOf( index ) == -1 ) {
            positionLookup.push( index );
            final.push(vertices[i])
            final.push(vertices[i+1])
            final.push(vertices[i+2])
        }
    }
    return final;
}

Answer №1

The SphereBufferGeometry utilizes an index-attribute to construct triangles from the vertices-array which stores points. Instead of storing triangles directly, the index-attribute contains three indices for each triangle that point to positions in the position-attribute. When making changes to the position-attribute, it is essential to update the index-attribute accordingly.

Alternatively, you can use geometry.toNonIndexed() to convert the format from "position + index" to just "position".

Another helpful tool is the Geometry.mergeVertices() function, designed for regular Geometries (not Buffer-) to consolidate vertices. This process may already be applied when creating a standard SphereGeometry, so it could prove useful in your case.

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

What is the best way to keep a div element fixed on the page no matter where you scroll?

For example: I have an extensive inventory of items, and as I hover my mouse over each item, a corresponding picture appears in this section. The div stays fixed in place regardless of scrolling. It works similar to a frame. ...

In JavaScript, define a class with a property that shares the same data type

I am facing a scenario where I need to define a property within a class that is an instance of the same class. Here's an example: class Example { constructor() { this.property = new Example(); } } const e = new Example(); However, I keep ...

JQuery Form Submission Failing to Trigger Controller Function

Attempting to submit a form in a JSP using JQuery/AJAX to call a method in a Spring Controller. The JSP structure is as follows: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> < ...

Creating an if statement that validates whether all variables have non-null values

I am still getting the hang of javascript and working on some coding projects from my textbooks. The current task involves creating an if statement to check if the values of the elements referenced by the names fname, lname, and zip are all not null. Here ...

Ways to change the value of a property in reverse

I have a question about Vue and whether it is possible to achieve the opposite of using props. Let me clarify further with an example. Consider the following: const app = Vue.createApp({ data: function() { return { text: "Hello" } ...

Determine Checkout Total with Laravel 5.2 Based on Radio Button Selections

Currently, I am developing an e-commerce platform using Laravel 5.2. At the moment, I am able to add products to my shopping cart, which is stored in a session. Once I am ready to proceed, I can view my shopping cart and upon confirmation, I am directed t ...

Developers guide to using Selenium IDE

After downloading the source code of Selenium IDE, I'm eager to make some edits but unfortunately, I can't seem to find any documentation on how to do so. Hey folks, anyone aware of any resources available for developers working on Selenium IDE? ...

The styling of Material UI (MUI) buttons is not displaying correctly

Why are my MUI button components displaying differently than the documentation? I have not made any external .css file or theme changes except for the ones listed. I have also installed the Roboto font and configured the typography. I want any changes I ma ...

Essential use of async-await with IndexedDB operations

Within my React TypeScript App, I utilize IndexedDB for data storage. To work with IndexedDB, I have a dedicated class called DB. One of the methods in this class is used to retrieve all data. public getAll(){ const promise = new Promise((resolve,reject ...

Alternative solution to fix navigation issue in Flex 4.5 when navigatetoURL is not functioning as intended

Perhaps you are aware of the compatibility issues that Google Chrome and Safari have when using navigatetoURL, as it only works in Internet Explorer. To address this problem, I found a code snippet on a forum which consists of a JavaScript function embedde ...

Error: Encountered an unexpected token F while trying to make a POST request using $http.post and Restangular

In our current project, we are utilizing Angular and making API calls with Restangular. Recently, I encountered an error while trying to do a POST request to a specific endpoint. The POST call looked like this: Restangular.one('aaa').post(&apos ...

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

I've been attempting to invoke a function from within a timed function called by setInterval(). Here's the snippet of my code: export class SmileyDirective { FillGraphValues() { console.log("The FillGraphValues function works as expect ...

Utilizing Angular to make API requests and handle promises

Currently, I am facing a challenge in my angular application which involves working with the soundcloud api. The issue arises when I make a call to the soundcloud api to retrieve my tracks, loop through them to extract the iframe embed object, inject it in ...

A JavaScript program will only replace strings if a certain local variable has been defined

This is a breakdown of how the script operates: The script first reads the manifest.json file, which includes a list of file names Next, it reads the content of the functions.php file and stores it in a variable named result The script then iterates throu ...

Automatically execute a function every 5 seconds in Angular application

I have a component in Angular that is responsible for fetching data from the backend. Below is the code snippet of the component export class MessagesComponent implements OnInit { constructor(private _router: Router, private http: HttpClient) { } t ...

Can anyone provide guidance on activating bootstrap tabs-left in bootstrap 3.3.x?

I've noticed that the style nav-tabs left isn't functioning in Bootstrap versions 3.3.0 and 3.3.2. I'm curious if anyone has found a way to re-enable this style so that tabs can run vertically with content displayed on the right. For those ...

React-Redux has encountered an unforeseen token

I'm completely stumped as to why I keep receiving such a pesky syntax error: 30 | }) 31 | */ 32 | function mapStateToProps(state) { | ////////////////// ^ 33 | return { 34 | count: state.count ...

Using JQuery to dynamically change className based on specific logic conditions

I am struggling to dynamically change the class name of a div based on the text inside another div using jQuery. Here is an example of the HTML structure: <div class="div-overlay"> <a class="image" href="https://www.e ...

Efficiently load asynchronous content using AngularJS 1.6 in conjunction with the jQuery Steps plugin

Having an issue where, after dynamically loading HTML content asynchronously using the jQuery Steps plugin: <section data-mode="async" data-url="test.html"></section> The AngularJS is failing to detect the content, causing elements with ng-sh ...

Oops! Dropzone encountered an error because no URL was provided

I am currently working on a form that includes both HTML and JavaScript code. The form looks like this: <form class="block-center" id="pdfForm" method="POST" action="form_threatment.php" enctype="multipart/form-data" style="margin-top: 30px;"> ...