Extracting Vertices, Edges, Faces, and Triangles from GLB Model Using ThreeJS GLTFLoader

I am looking to incorporate basic information about the model into my model viewer. Specifically, I need to obtain the vertex, edge, face, and triangle count of the object, or at the very least, the vertex count.

My attempted approach involves using the following code:

gltf.scene.traverse( function ( child ) {
    if ( child.isMesh ) {
        console.log(child.geometry.vertices)    
    }
})

Unfortunately, this code returns undefined, indicating that it is not functioning as intended. The geometry attribute belongs to the Type BufferGeometry, but I have been unable to retrieve the necessary information.

Another method I explored was:

console.log(child.geometry.attributes.position.count)   

This line does yield a numerical value, but I am unsure if it represents the vertex count or another metric altogether.

Is there a clear way to obtain the vertex count of the model and ideally extract data on edges, faces, and triangles as well?

Answer №1

There is a certain value returned by this code, but it is unclear whether it represents the number of vertices or something else entirely.

As it turns out, this value does represent the number of vertices in the geometry.

If you need to calculate the number of faces (which are essentially triangles), it depends on whether the geometry is indexed or not. In case of indexing, you can use the following formula:

const faceCount = child.geometry.index.count / 3;

Otherwise, if there is no index, you should use this formula:

const faceCount = child.geometry.attributes.position.count / 3;

You also need to manually compute the number of edges, which is typically three times the face count.

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

WebStorm not recognizing NodeJS Core Modules in External Libraries

As a newcomer to NodeJS and WebStorm, I am currently diving into a tutorial on creating an Express app. In the tutorial, the instructor always gets prompted with "Configure NodeJS Core Module Sources" including the URL nodeJS.org when creating a new NodeJ ...

I am facing an issue with personal UVs in Three.js, they stop functioning properly when

Upon loading the model with custom uvs in JavaScript, everything seems to be working fine: var loader=new THREE.JSONLoader(); loader.load( 'name.js', function ( geometry, materials ) { var material = new THREE.MeshFaceMateria ...

Having issues with JavaScript and MySQL data retrieval following XMLHttp update to the database

After running the newNet.php file successfully creates a new entry and assigns it an auto-incremented netID. The next step is to retrieve this newly created ID and use it in the showActivities() function to display the record. Ideally, it should work like ...

Passing the index in React Native

I am currently developing a music app utilizing the react-native-track-player library. I have created three components named Clusters, Songlist, and Play. Understanding How the Screen Works The flow of components is as follows: Clusters component -> S ...

Discovered an issue with Sentry debugging where a lengthy string is being returned as undefined

We are currently in the process of developing an Angular 1.x application that utilizes Bootstrap components. Recently, we integrated Sentry debugging into our site and encountered the following error: 'PAPADDINGXXPADDINGPADDINGXXPADDINGPADDINGXXPADDIN ...

Tips for switching the irregular polygon shape image on click and hoverIf you want to change

I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code: <div class="body_container"> <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" bor ...

Looking for a sophisticated approach in Spring MVC to manage the escaping and unescaping of strings being passed to the Front End

Currently, I am in the process of developing a web application utilizing Spring MVC. This project involves retrieving multiple objects from the Database, each containing strings as attributes. It's worth noting that I have no control over the format o ...

CSS3 Animation: Facing issue with forwards fill behavior in Safari when using position and display properties

After creating a CSS3 animation to fade out an element by adjusting its opacity from 1 to 0 and changing the position to absolute and display to none in the last frames, I encountered an issue. In Safari, only the opacity is maintained while the position a ...

Utilizing the JSON.parse method in JavaScript in conjunction with an Ajax request while incorporating the escape character "\n" for new line functionality

https://jsbin.com/zuhatujoqo/1/edit?js,console Edit: json file has this line: {"pd":"ciao \\n ste"} I need to retrieve a valid JSON file through an ajax call. Then parse the result using JSON.parse. I'm confused about the behavior of t ...

Give a radio button some class

<input id="radio1" type="radio" name="rgroup" value="1" > <label for="radio1"><span><span></span></span>1</label> <input id="radio2" type="radio" name="rgroup" value="2" > <label for="radio2"><span ...

Fetching dynamic JavaScript generated by PHP

I am creating a lightweight website and I have a piece of javascript code that I want to convert into a module by putting it in a separate file. This way, the code will only be loaded after a specific onClick event occurs. Successfully loading the javascr ...

What are the steps to create parallel curves in three.js for road markings?

My goal is to create parallel curved lines that run alongside each other. However, when I try to adjust their positions in one axis, the outcome is not what I expected. The code I am using is fairly simple - it involves a bezier curve as the central path ...

What is the best way to remove top divs without causing the bottom divs to shift upwards?

I am faced with a scenario where I must remove the topmost divs in a document without altering the user's view. Essentially, I need to transition from: ---------start of document div1 div2 div3 ---------start of window div4 div5 ------- ...

How come the splice method is changing the value of the original object?

There's something strange happening with this code I'm trying out. Code: const x = [{ a: 'alpha', b: 'beta' }, { a: 'gamma' }]; const y = x[0]; y.a = 'delta'; x.splice(1, 0, y) console.log(x) Output: [ ...

Embedding Array into Mongodb is an efficient way to store and

Whenever I attempt to store array data within MongoDB using the query below, it always shows a success message without actually storing any data in an empty array inside MongoDB. My goal is to successfully store array data inside MongoDB as shown in the f ...

Discover the secret to opening two JPG files on YouTube using just one URL!

I was curious about the way YouTube thumbnails function. Here is an example thumbnail from a random YouTube video. There is an hqdefault.jpg in the URL, followed by some variables that indicate the size. If we remove or change these variables, a larger im ...

Assign Attribute to a Different Data Transfer Object

I have a query regarding my nestjs project - is it possible to assign a value Attribute to another Dto? Specifically, I'm looking to assign idData to the id in IsUniqueValidator. I attempted the following code but it resulted in 'undefined&apos ...

Creating an NPM Module: Importing your own package as a dependency

Currently, I am in the process of developing a new NPM package. The repository includes an examples directory containing some JavaScript code that is compiled and served locally (or potentially through github.io). The configuration is reminiscent of the s ...

Troubleshooting HTTP requests in Angular JS when dealing with nested scopes

This particular question is derived from a previous answer found at this link. In my current scenario, I am attempting to initiate an http request where one of the data values that needs to be sent is represented in the view as {{selectedCountry.shippin ...

Delaying the intensive rendering process in Vue.js and Vuetify: A comprehensive guide

Recently, while working on a project with Vue.js 2 and Vuetify 2.6, I encountered an issue with heavy form rendering within expansion panels. There seems to be a slight delay in opening the panel section upon clicking the header, which is most likely due t ...