Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sean-bradley/statsvr
FPS and Custom Values HUD for WebVR & THREE.js Projects
https://github.com/sean-bradley/statsvr
rift statsvr threejs vive webvr
Last synced: 1 day ago
JSON representation
FPS and Custom Values HUD for WebVR & THREE.js Projects
- Host: GitHub
- URL: https://github.com/sean-bradley/statsvr
- Owner: Sean-Bradley
- License: mit
- Created: 2018-03-22T07:44:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T22:53:51.000Z (8 months ago)
- Last Synced: 2024-11-11T20:15:20.611Z (3 days ago)
- Topics: rift, statsvr, threejs, vive, webvr
- Language: TypeScript
- Size: 2.85 MB
- Stars: 35
- Watchers: 6
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# StatsVR
Performance statistics HUD specifically for WebVR & THREE.js Projects that use a HMD, such as Oculus Rift
The purpose of StatsVR is to monitor your computers performance while developing and running your application so that you don't need to remove your headset to check.
The StatsVR HUD displays the
- frames per second (FPS),
- millisecond duration (MS) of a section of code,
- Up to 3 custom variables in the HMD view, always facing the camera, and always on top of other meshes in the scene,
- Custom Object3Ds that you can also attach to the StatsVR Object3D. See Example 3.
You can download the project and view the examples.
```bash
git clone https://github.com/Sean-Bradley/StatsVR.git
cd StatsVR
npm install
npm run dev
```
Visit https://127.0.0.1:3000/
This is a typescript project consisting of two sub projects with there own _tsconfigs_.
To edit this example, then modify the files in ./src/client/ or ./src/server/.
The projects will auto recompile if you started it by using _npm run dev_
```javascript
import StatsVR from "statsvr";
```
## Simplest Example
```bash
npm install statsvr
```
- Import StatsVR
```javascript
import StatsVR from "statsvr";
```
- Instantiate and position StatsVR
```javascript
//pass in an existing scene and camera
const statsVR = new StatsVR(scene, camera);
//change default statsvr position
statsVR.setX(0);
statsVR.setY(0);
statsVR.setZ(-2);
```
- Update StatsVR in the render loop
```javascript
statsVR.update();
```
See the source code of the working examples.
## Example 1
Basic StatsVR setup for WebVR and Threejs projects.
[StatsVR Example 1](https://sbcode.net/threejs/statsvr-1/)
[](https://sbcode.net/threejs/statsvr-1/)
## Example 2
Advanced StatsVR for WebVR and Threejs projects. Change position and show Millisecond Graph.
[StatsVR Example 2](https://sbcode.net/threejs/statsvr-2/)
[](https://sbcode.net/threejs/statsvr-2/)
## Example 3
Advanced StatsVR for WebVR and Threejs projects. Custom Variables and custom 3d objects.
[StatsVR Example 3](https://sbcode.net/threejs/statsvr-3/)
[](https://sbcode.net/threejs/statsvr-3/)
## Example 4
StatsVR in a minigame using WebVR, Threejs, Haptic Feedback and Collision Detection.
[StatsVR Example 4](https://sbcode.net/threejs/statsvr-4/)
[](https://sbcode.net/threejs/statsvr-4/)