A new view helper inspired from the official one,
highly customisable and can be used as standalone or in conjuncture with OrbitControls, TrackballControls or custom camera controllers like @yomotsu/camera-controls.
📚 Documentation - 🚀 Quickstart - 🛠️ API - ⚡️ Examples
P.S. I think I overdid this one, promise 
, this is the last time I bring this up.
It looks good
Using Typescript import {ViewportGizmo, type GizmoOptions} from "three-viewport-gizmo"; complains that Module '"three-viewport-gizmo"' has no exported member 'GizmoOptions'.
Is there a working demo somewhere?
Thanks!
Thanks for the heads up! There are a few other issues that need to be addressed as well. I’ll let you know once the next commit is ready in the next couple of days.
I’ve done a full review of the library, cleaned things up, and made sure all TypeScript types are exposed. Plus, added a new VitePress documentation to make everything easier to follow. Take a look at the updated API—it should have what you need, including all the changes to the GizmoOptions.
Thanks a lot for sharing this library 
Thanks! The new version show correctly. Almost.
If I put placement: "bottom-right", in the options, typescript complains:
Type 'string' is not assignable to type 'GizmoDomPlacement | undefined'.ts-plugin(2345)
To make it work, I have to write placement: "bottom-right" as GizmoDomPlacement,
Also the lineWidth option makes no difference.
Now I have to study the documentation to see how to change colors (the green is barely visible). Setting the axis main and text colors makes the text invisible. And circle: false does nothing.
Also the hover color (white) is activated when the pointer is outside the circle few pixel over the circle (with bottom right placement).
Anyway, continue with this good work! Thanks
Good news! With the following options I’m on the good path to make what I need.
The only things that do not work are the lineWidth and circle: false that are ignored. Also, if you define axis colors but do not add text, the label disappears. Maybe it is best to mention this in the documentation.
const gizmoOptions: GizmoOptions = {
size: 150,
placement: "bottom-right",
lineWidth: 2,
sphere: {enabled: false},
x: {colors: {main: "#0000FF", text: "aqua"}, circle: false, text: "X"},
y: {colors: {main: "#00AA00", text: "#000"}, circle: false, text: "Y"},
z: {colors: {main: "#FF0000", text: "#000"}, circle: false, text: "Z"},
};
Have a nice day!
Not sure what’s causing this, It’s working fine for me, with the default vite ts config, even when compiling (npm i build).
Also working, using line2 under the hood for a larger width range.
Also working, try to configure your gizmo here. (I’ve also added support for the circle option)
This one went completely over my head, too much options I guess 
Yep! I made it this way so the gizmo doesn’t stick to the corners. I’m switching to a css gap instead.
Thanks for the valuable feedback, and please upgrade to the new 1.0.3 patch, I’ve added the circle support, and set the sphere offset to 0 with a default css offset of 10, fixing the hover gap, the rest should hopefully be working as expected.
Thanks for this patch. It solved various problems, except the line width:
const gizmoOptions: GizmoOptions = {
size: 150,
placement: "bottom-right",
lineWidth: 2,
sphere: {enabled: false},
x: {colors: {main: "#0000FF", text: "#000"}, circle: false, text: "X"},
y: {colors: {main: "#00AA00", text: "#000"}, circle: false, text: "Y"},
z: {colors: {main: "#FF0000", text: "#000"}, circle: false, text: "Z"},
};
Whatever value I put for lineWidth, the lines do not change. I even tried to put 8 at no avail. With this version also the y line is not draw (was in 1.0.1).
Thanks for your help!
P.S.: the problems I had with placement disappeared when I correctly typed the gizmoOptions object.
@crystalfp, lineWidth: 2 with Line2 is too low, try with 10, 20 or higher.
Ah! That’s the problem! Now with 30 the lines are well visible.
Thanks!
Another small thing. When I change the color of the axis, the color of the “free” spheres does not change.
The negative (nx, ny, nz) axis configuration is independent from their positive counterpart, you need set their configuration too.
const gizmoOptions: GizmoOptions = {
size: 150,
placement: "bottom-right",
lineWidth: 30,
sphere: {enabled: false},
x: {colors: {main: "#0000FF", text: "#000"}, circle: false, text: "X"},
nx: {colors: {main: "#0000FF", text: "#000"}},
y: {colors: {main: "#00AA00", text: "#000"}, circle: false, text: "Y"},
z: {colors: {main: "#FF0000", text: "#000"}, circle: false, text: "Z"},
nz: {colors: {main: "#FF0000", text: "#000"}},
};
Fantastic! Now the gizmo does what I want! Thanks!
The only strange thing was that I have to explicitly disable line in nx, ny, nz otherwise the lines in the negative directions appear.
Here are the options I use:
const gizmoOptions: GizmoOptions = {
size: 150,
placement: "bottom-right",
lineWidth: 30,
resolution: 64,
sphere: {enabled: true, hoverOpacity: .2},
x: {colors: {main: "#FF0000", text: "#000"}, text: "X"},
y: {colors: {main: "#79FF00", text: "#000"}, text: "Y"},
z: {colors: {main: "#0000FF", text: "#000"}, text: "Z"},
nx: {colors: {main: "#FF0000"}, circle: false, line: false},
ny: {colors: {main: "#79FF00"}, circle: false, line: false},
nz: {colors: {main: "#0000FF"}, circle: false, line: false},
};
Have a nice day!
Another small thing. I create ViewportGizmo in the same component that already calls THREEjs.
On the console the following warnings appear:
Maybe the second warning is something I assumed has a default value (sphere color?). But the first one cannot be avoided.
Thanks for looking!
Yes, adding color and hoverColor to the sphere definition silences the second warning.
But if I want the sphere color only on hover, make the gizmo not complains if color is missing or automatically if it is missing add it together with opacity = 0.
looks great @Fennec
is a view cube setting planned?
Do you have a particular model in mind!
I’ll see what I can do for the default options, for the moment you need to explicitly set them!
