A guide on generating indices for icosahedronbuffergeometry using three.js

I am facing an issue and struggling to find a solution. I am looking for an alternative method to texture a sphere in three.js by using icosahedronbuffergeometry instead of spherebuffergeometry with additional code to generate indices for rendering using drawelement instead of drawarray. However, the outcome is not what I expected. You can view the result through the link provided below.

The modifications made to the PolyhedronBufferGeometry function are as follows:

 1. var idx = []; // line 24097
 2. this.setIndex( new ( Uint16Attribute )( idx, 1 ) ); // line 24119
 3. var iv = []; // line 24157 to store temp indices
 4. var iCount = idx.length; // line 24157
 5. iv[ i ][ j ] = ij ; ij++; // in the loop in line 24174
 6. idx.push( iCount+ iv[ i ][ k + 1 ]); // in the loop in line 24194

See the modified result using icosahedronbuffergeometry here

For comparison, here is the result using spherebuffergeometry here

Answer №1

Upon further review within a short timeframe, I have identified certain errors in the additional code. It is now clear to me that the vertex buffer position is being duplicated unnecessarily for triangle sets, rendering the creation of indices unnecessary. Instead, indices can be generated by simply updating the code referenced as number 6 below:

 6. idx.push( idx.length + counter); // within the loop on line 24194

Codes 3 through 5 are no longer required. The finalized outcome can be viewed at the provided link without any missing triangles faces.

I believe there is room for enhancing the efficiency of the PolyhedronBufferGeometry code structure.

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

Developing a TypeScript NodeJS module

I've been working on creating a Node module using TypeScript, and here is my progress so far: MysqlMapper.ts export class MysqlMapper{ private _config: Mysql.IConnectionConfig; private openConnection(): Mysql.IConnection{ ... } ...

Extract the body.req object within a loop in a Node.js application

I'm looking to efficiently parse and save the body of a POST request using Mongoose in Node.js. Is there a way to use a for loop to accomplish this task, rather than manually saving every property? My ideal solution would involve something like: for ...

JavaScript Problem with Asynchronous and Deferred Executions

Currently, I have included this code in the footer to help eliminate render-blocking resources. <script async or defer src="/jquery.js"> /* custom code */ <script> $(document).ready(function(){ $('.menu-bar').click(function(){ ...

What is the best method for verifying that audio has not been loaded correctly?

After creating a script to scrape for mp3 audio file URLs and load them into my HTML audio element's src, I encountered an issue where some of the URLs were not functioning properly. As a result, the audio was unable to execute the load() method since ...

"An error occurred: Attempting to access properties of an undefined object (specifically 'foundTicket'). While the getTickets() function, which fetches data from MongoDB using Mongoose, is working fine, the getTicketById()

I recently started working with next.js and I'm following a project tutorial by a YouTuber. Here is the link to my code: https://github.com/Fanguiee/ticketing-app/tree/edit-existing-item or you can also read below. Thank you in advance :) Screenshot: ...

Concise way to add or insert an element into an array, at a specific property of an object

I am working with an object of the ObjectOfArrays type: type ObjectOfArrays = { [id: string]: Array<string> }; Throughout my code, I need to add strings to the correct array based on the id. Currently, I am using the following approach: if (id i ...

Synchronization issues arise when attempting to update the localStorage

Whenever I switch to dark mode, the update doesn't reflect in _app unless I have two tabs opened and trigger it in one tab. Then, the other tab gets updated with dark mode toggled, but not the tab where I pressed the toggle. I am using useSettings in ...

Update the designated dropdown menu using its identification number

I have discovered a way to change the selected dropdown item by value, but I am interested in doing it by the option ID instead. The reason for this is that the values are dynamically generated. Currently, I am working on creating a questionnaire that incl ...

Decoding a JavaScript object when receiving it as JSON through a POST request

While browsing through various SO posts, I came across the statement "javascript is JSON". However, I am struggling to apply this concept in my application. My issue arises when I try to perform a POST request using jQuery. $.ajax({ type: &apo ...

What techniques do Python and Javascript use to handle resizing of arrays?

What methods do programming languages like JavaScript and Python use to resize arrays compared to Java? For example, when adding an element to a 10-index array, Java typically doubles the size of the array while languages such as JS and Python may utilize ...

The exciting combination of three.js and confetti

I am currently facing difficulties in projecting the confetti outwards to create a fast explosion effect. My goal is to have the confetti spread out rapidly in all directions for 1 second, then gracefully float down to the ground. I suspect that my mathema ...

Converting NodeJS newline delimited strings into an array of objects

What is the method for reading a text file as follows: `{'values': [0,1,0], 'key': 0} {'values': [1,1,0], 'key': 1} {'values': [1,1,0], 'key': 1}` using: var fs = require('fs'); fs. ...

Utilizing Express Session with Vue CLI in a Node.js Environment

Developing a nodejs backend for my Vue application has brought up a challenge regarding user sessions and database operations. I initially tried using express-session, but the sessions appeared as undefined in subsequent requests. How can I address this is ...

Ways to calculate the total number of keys within a JSON object at a certain level

I need to process a JSON file by extracting values from keys located at a specific depth. The initial value I want to access is situated here: json.children[0].children[0].children[0] Is there a method to navigate through the JSON object at a particular ...

Tips on accurately positioning a ThreeJS building onto a Mapbox map

Currently, I have loaded an Eiffel Tower OBJ file and rendered it using three.js. However, I am unsure of how to accurately place the building on a map in the real world. I am using Mapbox-GL-JS to handle map-related issues due to its convenience with 3D m ...

Transmit the bound data (using ng-model) to a custom AngularJS directive

/*I am looking to define the maxDate as vmEndDate*/ app.directive('myDatepicker', function ($parse) { return function (scope, element, attrs, controller) { var ngModel = $parse(attrs.ngModel); alert(element.va ...

The onChange function in React JS for a Material UI 'number' TextField retains the previous value

In this element, I have an onChange function: <TextField id="rowinput" type="number" defaultValue={this.defaultRows} // defaultRows = 1 inputProps={{ min: "1", max:"5"}} onChange= ...

What is the best way to access and verify data from an array that has been passed through props

I am working with a component that takes an array as a prop <Component runners={['1','2']}/> Inside this functional component, my goal is to generate an element for each value in the array. Here's my logic: const { runners ...

Oops! Make sure to call google.charts.load before calling google.charts.setOnLoadCallback to avoid this error

My HTML file includes the following imports: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ...

Tips for managing onClick events within a conditional component

I am currently attempting to implement an onClick event on the data that I have selected from the AsyncTypeahead. My goal is to pass a callback function to the Problem component, which will only render if an item has been selected. However, after selecting ...