Three Viewport Gizmo
**Three Viewport Gizmo** is a highly customizable standalone interactive version of the official [three.js viewport helper](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/helpers/ViewHelper.js), it can be used alone or in conjuncture with [OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls) or custom camera controllers like [@yomotsu/camera-controls](https://github.com/yomotsu/camera-controls).
---
## Quick Start
### Try it Online
You can try ViewportGizmo directly in your browser on [jsFiddle](https://jsfiddle.net/e6r2qy9w/).
### Installation
```sh
npm install three-viewport-gizmo
```
### Usage
```js
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { ViewportGizmo } from "three-viewport-gizmo";
//... Initialize your Scene
const controls = new OrbitControls(camera, renderer.domElement);
const gizmo = new ViewportGizmo(camera, renderer);
gizmo.attachControls(controls);
// Render
function animation(time) {
//... Scene's animations and render
gizmo.render();
}
// Resize
window.onresize = () => {
//... Scene's resize logic
gizmo.update();
};
```
## Acknowledgments
- Thanks to the [Three.js](https://threejs.org/) community for their amazing work.
- This library was inspired from the official [Three.js Viewport Helper](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/helpers/ViewHelper.js).
## License
This project is licensed under the MIT License
### Contribution and Support
If you have any questions or need support, feel free to [open an issue](https://github.com/Fennec-hub//three-viewport-gizmo/issues).
Contributions are welcome! Fork the repository, make your changes, and submit a pull request.