What is the best way to incorporate facial features into an indexed THREE.BufferGeometry?

If I have created a THREE.BufferGeometry from a THREE.Geometry called oldGeom like this:

// using WebGLRenderer
var geometry = new THREE.BufferGeometry();
var indices = new Uint16Array(oldGeom.vertices.length);
var vertices = new Float32Array(oldGeom.vertices.length * 3);
for (var i = 0; i < oldGeom.vertices.length; i++) {
    indices[i] = i;
    vertices[i * 3 + 0] = oldGeom.vertices[i].x;
    vertices[i * 3 + 1] = oldGeom.vertices[i].y;
    vertices[i * 3 + 2] = oldGeom.vertices[i].z;
}
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

Now, if I want to add a face using the indices, how can I do that? My plan is to loop through the faces of oldGeom, but I cannot find any documentation on how to achieve this. Appreciate any help!

It's a bit similar to this question, but dealing with an indexed geometry.

Answer №1

Quoted from the BufferGeometry documentation:

index (itemSize: 3)

Enables the re-usage of vertices in multiple triangles through "indexed triangles," functioning similarly to Geometry. Each triangle corresponds to the index of three vertices, with this attribute storing the vertex index for each triangular face. If not set, the renderer assumes that each consecutive set of three positions forms a single triangle.

In "indexed triangles," the "position" array consists of numbers where every triplet represents a vertex (x, y, z). The "index" array comprises triplets where each set pertains to one face by referencing indices of vertices in the "position" array.

For instance, a vertex array might look like this:

var vertices = [0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0];

This can be interpreted as XYZ coordinate sets:

var vertices = [
    0, 0, 0, // vertex index 0
    1, 0, 0, // vertex index 1
    1, 1, 0, // vertex index 2
    0, 1, 0  // vertex index 3
];

Then, an index array such as:

var indices = [0, 1, 2, 1, 2, 3];

Represents two triangles:

var indices = [
    0, 1, 2, // face with vertices at indices 0, 1, 2
    1, 2, 3  // face with vertices at indices 1, 2, 3
];

Hence, triangle #1 comprises vertices at (0, 0, 0), (1, 0, 0), (1, 1, 0) while triangle #2 has vertices at (1, 0, 0), (1, 1, 0), (0, 1, 0).

An alternative method involves defining vertices without indexing. Indexing allows for efficient vertex reuse instead of redundant listings for each triangle appearance in the array. For every triangle defined in a single array, the 'vertices' array organizes sets of 9 numbers as one triangle (with consecutive vertices having XYZ values).

To address your query on adding triangles to BufferedGeometry, consider these options:

  1. Incorporate triangles into the initial 'oldGeom' object before conversion. It is simpler to add triangles to Geometry compared to BufferGeometry and makes use of '.fromGeometry()' as the new faces are already specified in 'oldGeom.'
  2. Create an oversized 'indices' array beyond the original indices and manually outline triangles there. New vertices absent in the 'vertices' array need addition. This process may prove cumbersome.

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

I am unable to utilize the Web Share API for sharing a file within my React app written in TypeScript

Trying to launch a WebApp for sharing files has been quite a challenge. After some thorough research, I stumbled upon the Web Share API which seemed like the perfect solution based on standard practices. The documentation provided a clear outline of how it ...

Utilize a while loop in JavaScript to trigger a message when a variable dips below zero

Forgive me if I seem clueless. I am a beginner in the world of Javascript and am currently experimenting with loops. At the moment, I am toying around with this particular piece of code: <!DOCTYPE html> <html> <body> <button oncl ...

Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding

I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear: --------------------------------------------- ...

Postman post request failing to insert Mongoose model keys

Recently, I've been experimenting with the post method below to generate new documents. However, when I submit a post request in Postman (for example http://localhost:3000/api/posts?title=HeaderThree), a new document is indeed created, but unfortunate ...

Jump straight to the top of the page with just a click using the Google Maps Store Locator

When I use my Store Locator and click on an anchor like "Zoom Here," "Directions," or "Street View," the href hash always brings me back to the top of the page. How can I prevent this from happening? I've tried examining the minified source code for t ...

Unique ActionBar design for my NativeScript-Vue application

I'm currently working on customizing the ActionBar for my nativescript-vue app. I have implemented FlexBoxLayout within the ActionBar, but I am facing an issue where the icon and title of the bar are not aligning to the left as intended; instead, they ...

Can Chrome DevTools be used to manipulate the login process?

For a recent project, I utilized the login authentication logic from this GitHub repository as a reference: https://github.com/cornflourblue/angular-authentication-example In a situation where the backend was offline, I manually tweaked the frontend code ...

Using a global variable in Vue and noticing that it does not update computed variables?

Currently, I'm in the process of developing a web application and have begun implementing authentication using firebase. Successfully setting up the login interface, my next step is to propagate this data throughout the entire app. Not utilizing Vuex ...

Trigger the fire controller code upon the change of the textbox date in ASP.NET MVC

I am looking for a way to trigger controller code when a user clicks out of a date textbox without using HTML helpers, only plain HTML. I am new to MVC and have previously worked with web forms. The controller code that needs to be executed is as follows: ...

A different component experiences an issue where Angular Promise is returning undefined

This is the carComponent.ts file containing the following method: async Download() { try { const settings = { kit: true, tyres: true, serviced: false, }; const [kits, tyres] = await Promise.all([ this.c ...

Encountering a hitch while attempting to integrate a framework in Angular JS 1

Having experience with Angular JS 1 in my projects, I have always found it to work well. However, I recently encountered a project that uses Python and Django, with some pages incorporating Angular. The specific page I needed to work on did not have any An ...

Is it not possible to apply the .includes method on a string within a v-if directive while utilizing a computed property?

Problem I am facing an issue while trying to determine if a string contains a substring within the Vues v-if directive. The error message I receive is: TypeError: $options.language.includes is not a function The technologies I am using are Vue, Vuex, and ...

Using jQuery to retrieve the nth child from a table after dynamically creating it with AJAX

When using AJAX in the code below, I fill and create simple data after retrieving it. $.ajax({ method: 'GET', url: '/analyzePage/searchTag/' + tagName, contentType: false, processData: false, success: function (data ...

How do I pass input values when calling an AJAX function to submit a form in HTML?

Utilizing a modal to submit new data via AJAX API consumption. Although sending the data through the API is not an issue, my lack of HTML skills makes it confusing on how to pass form data values. This scenario involves displaying a modal for users to in ...

Encountering issues when implementing react-router with the client-side library

After following the author's suggestion, I've successfully loaded the client-side library. The recommended method is to simply drop a <script> tag in your page and use the UMD/global build hosted on cdnjs. I have ensured that ReactRouter i ...

Having trouble accessing the text in a paragraph using JavaScript executor and web driver

On a particular website, there is: <p id="tempid" value="Manual Effect">testing the test</p> String value = (String)((JavascriptExecutor) this).executeScript("return window.document.getElementById('tempid').value"); System.out.pr ...

What could be causing issues with my Ajax and JavaScript functionality?

While developing a website to search through my python database, I encountered an issue. The non-JavaScript version was functioning flawlessly. However, when attempting to implement AJAX so that the page would not have to be refreshed each time, I faced ...

The Ajax validation form mistakenly redirects the echoes to a different page instead of the intended page for displaying the output

I am currently working on creating an ajax-form to validate the client-side server of my sign-up form. My goal is to have error messages displayed on the same page where they are triggered, without loading a separate page. Below is the code from my (sign ...

Random animation delay in an A-frame structure

I'm in the process of creating a virtual scene using A-frame () and have implemented an animation within it. My query pertains to randomizing the delay on this animation, so that it ranges from 0 to 2 seconds. Is there a method to achieve this? The cu ...

Tips for showing tooltip above all else

Having an issue with the tooltip not displaying correctly. Tried adjusting the z-index with no success. Styling in CSS: a.tooltipA { outline:none; } a.tooltipA strong { line-height:30px; } a.tooltipA:hover { text-decoration:none; } a.tool ...