https://github.com/depasqualeorg/three-stats-mesh

Shows the Stats module as a mesh in a Three.js scene to monitor performance
https://github.com/depasqualeorg/three-stats-mesh

three-js threejs

Last synced: 3 months ago
JSON representation

Shows the Stats module as a mesh in a Three.js scene to monitor performance

• Host: GitHub
• URL: https://github.com/depasqualeorg/three-stats-mesh
• Owner: DePasqualeOrg
• License: mit
• Created: 2022-03-03T18:57:33.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-06T11:15:59.000Z (about 1 year ago)
• Last Synced: 2024-10-11T14:31:56.210Z (3 months ago)
• Topics: three-js, threejs
• Language: JavaScript
• Homepage: https://unpkg.com/@depasquale/three-stats-mesh/example/index.html
• Size: 263 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Three.js Stats Mesh

This module allows you to place the [Stats](https://github.com/mrdoob/stats.js) indicator in a Three.js scene to monitor performance. This is particularly useful in immersive (VR) situations, when DOM elements are not visible.

### Installation

```

npm install @depasquale/three-stats-mesh

```

### Usage

Create an instance and make any desired adjustments to the object's position, scale, etc.:

```javascript

import StatsMesh from '@depasquale/three-stats-mesh';

// Set up the Three.js scene

// ...

const statsMesh = new StatsMesh();

statsMesh.object.position.y = 1;

statsMesh.object.position.x = -2;

statsMesh.object.scale.setScalar(4);

scene.add(statsMesh.object);

```

Add the Stats element to the DOM if desired:

```javascript

document.body.appendChild(statsMesh.stats.dom);

```

Add this to the render loop:

```javascript

statsMesh.stats.update();

```

Before removing the element, call this to stop the `setInterval` timer:

```javascript

statsMesh.stop();

```

### Example

A full example is provided in the `example` directory. To try it locally in your browser, run:

```

npm run example

```

Or try it [here](https://unpkg.com/@depasquale/three-stats-mesh/example/index.html).