Skip to main content
Version: 4.x

Axis cross tool

To effectivly navigate a 3D model it is often useful to have an helper to show the orientation of the model. The AxisViewTool is a configurable overlay that shows the current orientation of the model. It also reacts to clicks, orienting the camera to face clicked.

AxisViewTool

The appearance of the tool is highly configurable, with options to set:

  • Background color of each face of the orientation box
  • Labels, font size and font color of each face
  • Outline width and color of each face
  • Compass north-orientation, label, font color and size
  • Compass tick color
  • Animation speed when clicking a face of the orientation box
  • Size and padding
  • Position - either absolute, or relative to a corner of the viewer

Basic example​

By default, the axis tool will be placed in the lower right corner of the viewer, and initialization is very easy:

Live Editor

Customize axis cross position​

It is possible to specify a custom position for the axis tool. Position can be specified using either RelativePosition or AbsolutePosition. Using AbsolutePosition will position the axis cross at a specific position within the canvas of the viewer.

note

The Y axis is positive upwards, meaning that 0 is at the bottom of the viewer.

Live Editor

Using RelativePosition will position the axis cross relative to a specific corner (will also handle screen resize).

Live Editor

Customize axis cross size and animation speed​

When clicking a face of the orientation box, the camera will move to face the respective direction. The animation speed of this movement can be configured. Size of the axis tool is also configurable.

Live Editor

Customize orientation faces​

Each of the faces of the orientation box can be styled.

Live Editor

In addition to the settings demonstrated above, the following settings can be set:

  • fontSize - size of the label font. Automatically determined when undefined
  • outlineColor - color of the outline of each of the faces
  • outlineSize - width of the outline. Automatically determine when undefined

Customize compass​

The compass at the base can be customized to change the orientation label (which defaults to N for North), font color and size and tick color.

Live Editor