tog

three-orientation-gizmo

Creates an orientation gizmo (similar to a view cube) to show the orientation of the camera's rotation. The user can click on each axis and the camera will rotate to face that direction. It is styled similar to Blender's orientation gizmo.

Showing:

Popularity

Downloads/wk

41

GitHub Stars

14

Maintenance

Last Commit

7mos ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

153.0KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

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

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.getElementById("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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial