I’ll give it a shot, but I can’t promise it’ll be as sophisticated, I mean the arrows and the circles at the corners 
I’ve just wrapped up a sketch of the new cube setting — you can check it out here: jsfiddle.
Before moving forward with integration, I’d just like to confirm whether this design is mainstream and widely used across libraries or if it might be a proprietary asset.
If it’s proprietary, we may need to request permission to ensure it’s safe to include.
Let me know what you think!
2 Likes
It’s good, it’s cool 
1 Like
nice work! view cubes are main stream, they’ve been in everything that has to do with cad for over 20 years. the grey edges btw should be active as well, or well, there aren’t any, the spaces between the faces i mean.
we have an implementation for this in drei as well but some of the math is bugged so i have hope we could switch to something better
1 Like
I have been switching from old style gizmo to this new one and it has been working fine.
Looking forward to eventually try the cube as well.
Just to mention one thing about repositioning the gizmo, in my case it was from bottom to top and vice versa. For this I have used the gizmo’s internal _domElement style:
if (gizmo) {
gizmo._domElement.style.top = menu_location_bottom === true ? 0 : '';
gizmo._domElement.style.bottom = menu_location_bottom === true ? '' : 0;
gizmo.update();
}
Maybe I missed some built in functionality to do this, like for example gizmo.setPosition( 'top-right' ) or maybe gizmo.position = 'top-right' or any similar which I couldn’t see.
The menu_location_bottom variable just reports to the current position of the main menu in my viewers. As a test you can try my OBJ+MTL Viewer and just paste this link into the URL option of the viewer and hit he Load button. Once the model is loaded then the gizmo should appear in the bottom right corner and the main menu switching is done with the arrow down button.
1 Like
That’s great! I’ll proceed with incorporation.
I see what you mean, @dubois has just shared a viewcube incorporating those gaps, if I get stuck with the math, I’ll ask him
In the current configuration, the DOM element accepts either an id or a className. You can apply CSS styles for both cases. Here’s an example of how it should look:
const gizmo = new ViewportGizmo(camera, renderer, { id: "gizmo" });
const domElement = document.querySelector("#gizmo")!;
domElement.className = !!menu_location_bottom ? 'bottom' : 'top';
gizmo.domUpdate();
And set the style as follow:
/* The ` !important` flag is required to override the default style */
#gizmo top {
top: 0 !important;
}
#gizmo bottom {
top: unset !important;
bottom: 0 !important;
}
The problem with setting new options at runtime is similar to working with three.js primitive geometries, everything is procedurally generated, so any changes require regenerating the entire gizmo. However, I think this use case could come up frequently, so I’ll be adding a getter/setter placement property to make it easier to adjust on the fly.
1 Like
That’s nice, I was looking for something like this for quite some time. Congrats!
I’m looking forward to trying the cube. As a suggestion, I think the one used in Forge Viewer is pretty nice.
1 Like
The V2 Is Here!
(Apologies for the delay, and thanks for your patience!)
The new Version 2 now available, featuring significant updates, new functionality, and key fixes based on community feedback. Here’s what’s new:
New Features & Improvements
-
New Cube Support: The gizmo now includes a CAD like cube representation.
-
More Configuration Options: Customize the gizmo’s look and feel with greater control over its appearance.
-
Corners and Edges Support: Added support for selecting and highlighting corners and edges for both
sphereandcubetypes. -
Improved Orientation Handling: Switched to spherical coordinates, its more accurate, and resolve prior issues with the old
eulerbased computation. -
New
placementProperty: Dynamically update the gizmo placement at runtime. -
New
setMethod: Regenerate the gizmo entirely during runtime. (Use sparingly—it’s not performance-friendly!)
Fixes
- Three.js Versioning: Fixed compatibility issues across Three.js versions.
- Orientation Handling: Fixed some inaccuracies with the mouse orientation handling.
- Axis options: Added an
enabledoption for better axis control. - Dependencies Cleanup: Adjusted dependencies, moving relevant ones to
peerDependenciesanddevDependencies.
Acknowledgments
- @wenrenqiang : Thank you for initiating the need for this tool in the first place.
- @drcmda : Thank you for suggesting the cube option.
- @crystalfp : Thank you for your thorough reviews and outside perspective—it was incredibly helpful!
- @agargaro : I appreciate your assistance in cleaning up dependencies.
- @GitHubDragonFly : Thanks for suggesting the
placementproperty and inspiring the newsetmethod. - @dubois: Thanks for sharing your inspiring viewcube version.
- @hofk : Thanks for all the gems you’re sharing on this forum.
- @prisoner849 : I can’t make an “Acknowledgments” section without acknowledging the G.O.A.T
Future Plans
- Add arrow controls for even more interactivity.
- Explore automated Git and npm deployments to streamline releases.
As always, your feedback, suggestions, and constructive criticism are greatly appreciated. Let me know if you’d like to tweak anything further!
5 Likes
Should I get a shoutout too?
2 Likes
There you go!
1 Like
1 Like
Adding compass to the scene - Questions - three.js forum
Real Compass on mobile browsers with Javascript - DEV Community
Online Compass - Direction compass in your browser
1 Like
Perhaps the appearance part should be provided and encapsulated into textures, so that if you want different styles of patterns, you can simply replace them with corresponding images instead of writing code every time, especially for some complex patterns that can only be implemented with images. I have a strange idea to stick video textures or dynamic images on each side of the cube. It seems very interesting, hahaha
1 Like
That should do the trick - right?
1 Like
nice work @Fennec just tried it and it’s perfect!
1 Like
Gracias! 
1 Like
This is amazing! 
I wish I had seen it earlier. I tried to create a closed cube version and had a tough time isolating the rounded edges and corners.
I had the same idea while working on it! I even thought about creating a compass example. It’s actually easier than you might think. The new configuration options give you more precise control over its appearance, and since the Gizmo is an extension of Object3D, you can add any objects or models you want!
It wasn’t designed for this type of application, but you can adapt it. Similar to the compass idea, you could create a cube with multiple VideoTexture materials, add it as a child of the gizmo, and adjust the axis opacity to suit your needs.
2 Likes
I really love the addition of the cube view! I’ve been looking for this feature for some time, and I know many others have as well (for instance this post). This is so super useful!
In addition to clicking on one of the cube’s faces, edges, or corners to view the model from that orientation, would you consider adding the following features to your future plans?
Add clickable arrows around the cube to rotate the view in predefined increments in a specific direction.
Allow users to drag the view sideways or up/down while maintaining the same viewing direction.
Add a button to reset the view to the original default or “home” orientation.
Examples that implement these features on view cubes are:
-
AutoCAD
-
OnShape
-
OnScale
-
Fusion 360
-
FreeCAD
1 Like
You’re absolutely right, it does feel incomplete without the arrows.My main focus was on the style configuration. In the next version, I’m planning to add a closed, rounded cube option with more control over the gaps between edges and corners. Looking at your last illustration, I might also add a flat option.
2 Likes