Displaying data on the number of vertices and triangles in the editor interface

Can anyone provide guidance on how to incorporate a legend displaying the number of Vertices and Triangles, as well as a 3 axes helper legend, in Three.js rendering within the example editor? I have attached a screenshot of the scene with these legends for reference.

https://i.sstatic.net/2fpp2pPM.png

I am struggling to figure out how to include these elements in my own scene. Is there an addon or custom geometry available for this purpose?

Answer №1

If you're looking for information on how to get all the vertices, edges, and triangles of a scene, check out this thread. However, some details there may need updating.

One way to achieve this is by utilizing the .info property, but keep in mind:

  • Using this property in the global scope will give you the total count of vertices, which can lead to issues when dealing with multiple objects in the scene.
  • Also, take note that having wireframe: true will result in 0 vertices; ensure it's set to false.

Additionally, as highlighted by pailhead, obtaining consistent values can be challenging due to differences between non-indexed and indexed geometries. In non-indexed geometries, vertices are not shared across triangles, resulting in more vertices, while indexed geometries share vertices, leading to fewer of them.

Regarding rStats, it no longer functions as the WebGL1 standard has been deprecated since r117/153, completely removed in r163. If you're using older versions with WebGL1, it may work, but with the latest versions utilizing WebGL2, it won't.

For more details, refer to the Migration Guide.

To create a pseudo-rStat, consider using TextGeometry:

When it comes to camera switching, you can animate the transition between views using libraries like GSAP or TWEEN.

You can also utilize an HTML layer for better display:

... (Code snippets provided) ...

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

Extracting address from a string containing HTML line breaks and apostrophes using JavaScript

I need help with parsing an address that is in a string format like the following: "1234 Something Street<br>Chicago, IL 34571<br>" I am struggling to extract and assign it to separate variables: var street = ...; var city = ...; var state = ...

Having trouble retrieving data when updating a user in ExpressJS

Trying to update an experience array in the User model with new data, but facing issues with saving the data in the exec function. As a result, unable to push the new data to the array on the frontend. Here is the current code snippet: router.post('/ ...

Navigate to the top of the page prior to updating the Link route in NextJS

Whenever I click on a link to navigate to a new page, the page loads and immediately scrolls to the top. I want to change this behavior so that the scroll resets to the top before the new page is rendered. You can observe this issue on . If you scroll do ...

Incorporating a new parameter into the JSON response from SoundCloud

Currently, I am in the process of developing an app utilizing the SoundCloud JavaScript API. My approach involves fetching the JSON data from: http://api.soundcloud.com/resolve.json?url=http://soundcloud.com/matas/hobnotropic&client_id=YOUR_CLIENT_ID ...

Retrieve the file for saving using the HttpPost method in Asp.Net MVC

In my Asp.Net MVC project, there is a page where users can edit data loaded into a table, such as changing images, strings, and the order of items. Once all edits have been made, the client clicks on a Download button to save the resulting xml-file on the ...

Tips for automatically incorporating animation upon page initialization

I'm looking to add an automatic image effect when the page is loaded. I currently have this code in my js file: $(window).ready(function(){ $(pin).click(function(){ $("#pin01").show().animate({left: '650px'}); }) }); Here is the HTML wit ...

A guide on updating URLs that are not enclosed within an anchor tag using JavaScript

In my current scenario, I am dealing with text that includes URL links presented in two different formats. www.stackoverflow.com <a href="http://www.stackoverflow.com">Stack over flow</a> My objective is to create a straightforward function ...

Utilizing Multiple Components on a Single Page in React.js

I'm currently setting up a React main page that renders two separate components - Header and Test. render() { return ( <Header /> <Test /> ); } The Header component contains static content, while the ...

The angularjs response data is mysteriously missing from the console display

I am struggling with the code below, as the data is not showing in the console log. I am new to Angular and would appreciate some help on how to display the data in HTML. this.$http.get(properties.client+'/123') .then(response => { ...

Incorporate this form created externally onto my website

I have been working on my website and I am looking to incorporate a form that opens up once the login button is clicked. This form was generated using an online form builder which provides an embed code for seamless integration onto websites. Below, you wi ...

I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { bac ...

Integrating additional information (HTML) into current content utilizing Vue JS data structures

I am attempting to use Vue JS to load content onto a page. The user interface consists of a select element, a textarea, and a button. I want to display data from a third-party API response on the page. The first item loads successfully, but subsequent item ...

Connect the plotly library to interact with the data in a Vue.js application through

I'm currently working on a project that involves using vue.js and the plot.ly JavaScript graph library. I am trying to figure out how to bind "pts" to the data's "TestSentences" in Vue. Below is my code snippet, thanks to everyone who has provide ...

The Vuejs single-file component fails to display on the page

Even though there are no errors in the browser and Webpack compiles successfully, the message "hello from dashboard" is not displaying on the page. I am currently using Vue version 2.6 In my main.js file: import Vue from 'vue' Vue.component(&a ...

I'm interested in exploring different database implementation patterns in JavaScript. What kinds of approaches can I consider?

As someone who is relatively new to exploring JavaScript, I have been immersed in experimenting with a node test app and MongoDB. I am eager to delve into the database aspect of the app but finding myself uncertain about the most commonly used patterns in ...

Preserve a retrieved value from a promise in Angular

Upon loading the page, the dropdown menu is populated with various values (such as 1, 2...7). However, when attempting to set a specific value based on a certain condition within a promise, it doesn't seem to work. How can this issue be resolved? htm ...

Accessing a file's source using the Box.net API and downloading the file contents

Recently, I've been busy working on a Web Application project (for fun) that focuses on editing files stored in the cloud. I'm utilizing the box.net API for this task, but I've come across a challenge - obtaining the source code of files. Un ...

A simple guide to positioning an image between two lines of text with Material UI

I am trying to design a banner area with an icon on the left and two lines of text (title and sub-title) in the middle. However, when I implement this structure, each element appears on a separate line. You can view the issue here: https://codesandbox.io/ ...

communicating data within a JavaScript file across server and client

One of my files, parameters.js, contains the following JavaScript code: const myJSON = { parameter1: 2, parameter2: 2. } module.exports = {myJSON} In another file called server.js, I can access this data by usin ...

How can you use jQuery to remove a class from an element after a specified period of time?

After updating a record in the database, I plan to make modifications using an AJAX request. Once that is done, I will dynamically add a class to the rendered div by utilizing the addClass method. The class being added (we'll refer to it as colored) c ...