Three Viewport Gizmo is a highly customizable standalone interactive version of the official three.js viewport helper, it can be used alone or in conjuncture with OrbitControls or custom camera controllers like @yomotsu/camera-controls.

Quick Start

Try it Online

You can try ViewportGizmo directly in your browser on jsFiddle.

Installation

npm install three-viewport-gizmo

Usage

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 community for their amazing work.
• This library was inspired from the official Three.js Viewport Helper.

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.

Contributions are welcome! Fork the repository, make your changes, and submit a pull request.