Package Exports

three-orientation-gizmo

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (three-orientation-gizmo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

three-orientation-gizmo

This library creates a orientation gizmo for showing the user how the camera is rotated in space using just an HTML 5 canvas. I love Blender 2.8's new orientation cube and this replicates that for Three.js.

The gizmo has several configurable properties for changing colors, sizing and what axes are visible.

GIF of Orientation Gizmo

Dependancies

Three.js (https://www.npmjs.com/package/three)

Usage

Include the OrientationGizmo class:

Web Browser:

<script src="../dist/OrientationGizmo.js"></script>

Node.js

const OrientationGizmo = require("OrientationGizmo");

Then just create a new Orientation Gizmo, passing in the Three JS Camera to use for the rotation and any options to style it how you want:

var orientationGizmo = new OrientationGizmo(camera, { size: 100, padding: 8 });
document.body.appendChild(orientationGizmo);

This library will not rotate your camera for you, but it will give you the direction clicked:

orientationGizmo.onAxisSelected = function(axis) {
  console.log(axis); // { axis: "x", direction: THREE.Vector3(1,0,0) }
}

And lastly, you need to call the update() function in your render loop.

requestAnimationFrame(() => {
 orientationGizmo.update();
});

In the future I might support rotating the camera and changing between ortho and perspective camera but this can vary widely between applications.

Options

Here are all the options and their defaults:

{
    size: 90,                         // Size of the canvas
    padding: 8,                       // Adds padding around the gizmo (makes it look nicer when using a circular background)
    bubbleSizePrimary: 8,             // Size of the circle for the positive axes (X,Y,Z)
    bubbleSizeSeconday: 6,            // Size of the circle for the negative axes (-x,-Y,-Z)
    showSecondary: true,              // Show the negative axes bubbles
    lineWidth: 2,                     // Size of the stroke to use for connecting the bubble to the center point
    fontSize: "11px",                 // Size of the label for the axis in the bubble
    fontFamily: "arial",              // Font for the label for the axis in the bubble
    fontWeight: "bold",               // Weight of the label for the axis in the bubble
    fontColor: "#151515",             // Color of the label for the axis in the bubble
    colors: {                         // Array of colors to use for the axes (
        x: ["#f73c3c", "#942424"],    // X-Axis colors [foreground, background]
        y: ["#6ccb26", "#417a17"],    // Y-Axis colors [foreground, background]
        z: ["#178cf0", "#0e5490"],    // Z-Axis colors [foreground, background]
    }
}

Notes

Blender on hover changes the background to be a light transparent gray circle. To achieve this affect you can do that with just css!

orientation-gizmo:hover {
    background: rgba(255, 255, 255, .2);
    border-radius: 100%;
    cursor: pointer;
}

Contributors

Shoutout to Rabbid76 on Stackoverflow for helping me get the camera matrix rotation working.