Creates an orientation gizmo (aka view cube) showing the rotation of the camera for Three JS.
npm install three-orientation-gizmohtml
`
- Node.js
`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:
`js
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:
`js
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:
`js
{
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!
`css
orientation-gizmo:hover {
background: rgba(255, 255, 255, .2);
border-radius: 100%;
cursor: pointer;
}
``