Revisiting viewport helper gizmo

Resources
, ,
26

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 :sweat_smile:

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