ThreeJs is known for effortlessly handling an abundance of vertices, far surpassing the number typically found

I came across this code snippet:

function loadObject(filePath){
  var loader = new THREE.OBJLoader();
  loader.load(
    filePath,
    function ( object ) {
      child = object.children[0];
      var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );      
      var material = new THREE.MeshBasicMaterial({wireframe: true});
      model = new THREE.Mesh(geometry, material);
      scene.add(model);
    },
    function ( xhr ) {
      console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
      console.log( 'An error occurred' );
    }
  );
};

The file man.obj contains 214 vertices and 332 faces. However, when I check the number of faces using model.geometry.faces.length, it returns 332 which is correct. Surprisingly, when I use model.geometry.vertices.length, it gives me 996 instead of 214...

Can anyone explain why this discrepancy exists?

Answer №1

The current loader being utilized is generating what is known as "triangle soup". This essentially means that the N triangles are actually represented by N * 3 vertices. The triangles themselves do not exist independently, but rather are constructed from the set of vertices. Each group of three vertices forms a triangle in sequence. Consequently, in a uniform smooth mesh, numerous duplicated vertices will persist.

It may be advantageous for you to explore "indexed" geometry instead. With this form of geometry, there exists a specific triangle buffer which maintains the indices for the vertices. In a continuous smooth mesh, it becomes possible for one vertex to be shared among multiple triangles.

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

The request to login at the specified API endpoint on localhost:3000 was not successful, resulting in a

As I continue to develop my programming skills, I have been working on configuring a database connected with nodejs in the same folder. However, when trying to make an ajax request to the database, I encountered an error indicating that the database may be ...

I have to display a pop-up message box after selecting an option from a dropdown menu that fulfills a set of conditions

I am attempting to display a pop-up message when a selection is made on a dropdown menu that meets specific criteria. The dropdown list is generated from a coldfusion output query. I am relatively new to JavaScript, so I may be missing something in my code ...

Using an array as a route parameter triggers a "Expected to not repeat" warning

Every time I attempt to set up a router-link with an array as the parameter, the link functions properly but triggers the following warning : "Missing param for named route "start-run": Expected "files" to not repeat, but received ["aaa"] router.js .. ...

The importance of displaying doughnut chart tooltips in Angular 5 console

Is there a way to consistently display tooltips for a doughnut chart? This code snippet might help: Chart.pluginService.register({ beforeRender: function(chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips // we ...

Tips for modifying a HTML table to switch one column with 60 rows to three columns with 20 rows dynamically

Need assistance with separating a dynamically loaded single-column HTML table of 60 rows into three columns of 20 rows each using jQuery in JSP. For example, starting with the loaded table: test 1 test 2 test 3 test 4 test 5 test 6 test 7 test 8 test 9 t ...

You cannot reassign NodeJS global variables

Currently, I am in the process of writing unit tests for code that utilizes a JavaScript library. This particular library sets a global variable if it does not already exist using the following pattern: var GLOBAL_VAR = GLOBAL_VAR || {} While this method ...

Adding text after a div in React-JS using Bootstrap: A quick guide

Just starting out with website development and I have a question. As I practice making this website, I am struggling to figure out how to add the text "To know more about us click here" below the 'Get started' button. I tried adding a simple < ...

Error message: "Window object not defined during NextJS build process."

Why am I encountering a 'window not defined' error? I haven't referenced window or document in my code, and it runs without issues during development but throws an error during the build process. ReferenceError: window is not defined at ...

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

The application experiences a sudden failure when Mongoose is unable to locate the specified item

I am facing an issue where my app crashes when mongoose is unable to find the item. I want to display a 404 error page instead. Here is the code snippet: try { let theBeverage = Product.findOne({ _id: beverageId }); await theBeverage.then((data) ...

Best Practice for Delivering JavaScript Files with Node.js Ajax?

In my current project, I am developing a node application that serves client-side JavaScript code to a static webpage. The goal is to have the code evaluated within the webpage, similar to the concept demonstrated in this example, but using Node.js instead ...

How can we use the useState hook in React to dynamically generate state variables?

I'm currently working on a React app where input fields need to be stored in the state. While I can use the useState hook to easily store these values, the challenge I'm facing is that I don't know what fields are needed since they are retri ...

Creating a 2D image of a Three.js scene in JPG format: Is it possible?

I am working with a three.js scene that includes rendering a 3D cube. The code snippet for the scene setup is shown below: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHe ...

What is the process for inserting a document into an array that is nested within another array?

My current dilemma revolves around a document (referred to as 'root') which contains an array of other documents ('stick'), each of which in turn contain another array of documents ('leaf'). Simply put: root{ stickChain[leaves ...

Dynamic drop-down navigation with rearranging menu

I am attempting to design a drop-down navigation bar with 2 rows. Initially, only 1 row is visible. Upon clicking the visible row, both rows should appear. Subsequently, when one of the 2 rows is clicked, only that specific row should be displayed. Below a ...

Dealing with 404 page not found error without replacing the default in Next.js 13

I followed the Next.js 13 documentation's suggestion to create a file called not-found.jsx in my app directory to handle 404 errors. But, despite placing it inside the app directory and intended for layout and loading purposes, it is not overriding th ...

Using jQuery to extract a specific portion of a URL path

Seeking assistance with extracting category information from lengthy URLs and assigning it to a variable. Consider the following URL: http://example.com/community/home/whatever.html The goal is to assign the variable to the folder path that follows /hom ...

Issues have been identified with the functionality of the Am charts v3 XY in conjunction with a

I'm currently working on a project with angularJS and utilizing the npm package amcharts3 "^3.21.15". I've encountered a minor issue regarding the logarithmic scale in my XY chart. Below is my chart without the logarithmic scale: View working ch ...

Angular: Preserve the URL even when encountering a 404 page

Creating a custom 404 page in Angular 4 is something I have recently done, and I am looking for a way to preserve the incorrect URL that was input by the user. To see an example of this behavior, you can visit sites like GitHub. They show a 404 page when a ...

What is more costly in terms of performance: toggling the visibility of a DOM node or adding/removing a DOM node?

When it comes to calling, which is the more costly operation? Displaying and hiding a DOM node Creating and deleting DOM nodes Let's assume we only have one or a few (less than 5) nodes that require manipulation, and the application is running on a ...