Using Gizmos in Torch AR

With the release of Torch 3, we've introduced gizmos into the design environment. Gizmos are a nice addition to your workflow, making it easier than ever to quickly place, rotate, and scale objects with more flexibility. In this document, we'll take you all the way through using the gizmos.

Introduction to the Gizmo

Any time you have an object selected in the Design Environment, you see a 3D gizmo appear at its center. The gizmo is a tool that allows you to manipulate objects in 3D, similarly to how you can use gestures to manipulate objects, but it gives you a bit more precision. For example, you can use the Position gizmo to move an object only forward and backward (along its z-axis) without accidentally also moving it sideways (along its x-axis).

Tip: You can undo gizmo manipulations just like any other change, so it’s safe to try it out!

Changing the Gizmo Mode

Next to the gizmo, there is a medallion that shows the current gizmo mode. By default, the gizmo is in Position mode. To change the gizmo mode, tap the medallion to open the gizmo UI, and then tap the mode you want to switch to. The gizmo modes are:

  • Position
  • Rotation
  • Scale
  • None

Note: The gizmo UI closes automatically after a moment when it’s not being used. It also snaps shut and disappears when you deselect the object, so you can deselect and reselect the object to quickly close the UI.

Position

The Position gizmo has three colored arrows, one for each axis in 3D.

Tip: The three gizmo colors are standard colors used to represent the three axes of 3D space. Red = the x-axis, green = the y-axis, and blue = the z-axis. Rgb = xyz. It rhymes!

To move an object along one of its axes, tap and hold the corresponding arrow tip. The arrow will highlight when it has been selected. While the arrow is highlighted, drag forward or backward along that axis: 

  • The red arrow moves the object side-to-side along its x-axis
  • The green arrow moves the object up-and-down along its y-axis
  • The blue arrow moves the object forward-and-back along its z-axis

Rotation

The Rotation gizmo has three rings. Each ring represents rotation around the axis corresponding with its color.

To rotate an object around one of its axes, tap and hold the corresponding ring. The ring will highlight when it has been selected. While the arrow is highlighted, drag around the ring in the direction you would like to rotate:

  • The red ring tips the object forward-and-back around its x-axis
  • The green ring turns the object around its y-axis
  • The blue ring tilts the object side-to-side around its z-axis

Tip: If you’re looking at a ring edge-on, you may have trouble grabbing it and dragging it. But this is all in real-world 3D space! Try moving around to the side so you can more easily use that ring. It also helps to trace your finger along the ring for greater control.

Scale

The Scale gizmo looks like the Position gizmo, but with boxes on the end of each axis instead of arrow tips.

To resize an object along one of its axes, tap and hold the corresponding box. The box will highlight when it has been selected. While the box is highlighted, drag forward (stretch) or backward (squish) along that axis:

  • The red box makes the object wider or narrower along its x-axis
  • The green box makes the object taller or shorter along its y-axis
  • The blue box makes the object longer or shorter along its z-axis

Hiding the Gizmo

Hide just the gizmo and leave the UI medallion visible

To hide the gizmo but leave its UI still easily available, tap the medallion to open the UI and tap the last gizmo mode: ‘None’. To show the gizmo again, simply pick a different gizmo mode.

Hide the gizmo and its UI completely

To completely hide both the gizmo and its UI, open the Quick Actions Drawer and tap the ‘Hide Gizmo’ button. (This button is only visible if you have at least one object selected.) To show the gizmo and its UI again, tap the same button, which now says ‘Show Gizmo’.

Position and Scale Along a Plane

Both the Position gizmo and the Scale gizmo have triangles located between each pair of axes. These triangles cause the gizmo to act along planes instead of axes. Touching and holding a triangle will highlight the two adjacent axes to indicate which plane that triangle works on.

Tip: Each triangle has the opposite effect of the perpendicular axis of the same color. For example, the Position gizmo’s red triangle locks the x-axis and moves the object on y and z.

Position

To drag an object along a plane perpendicular to one of its axes, select the corresponding triangle and drag around on that plane:

  • The red triangle moves the object along the plane perpendicular to its x-axis
  • The green triangle moves the object along the plane perpendicular to its y-axis
  • The blue triangle moves the object along the plane perpendicular to its z-axis

Tip: Just like with the rotation gizmo rings, if you’re looking at a triangle edge-on, you may need to move around to the side in order to see and use it more easily.

Scale

To resize an object uniformly along a plane perpendicular to one of its axes, select the corresponding triangle and out from the center of the gizmo (bigger) or in toward the center of the gizmo (smaller):

  • The red triangle resizes the object along the plane perpendicular to its x-axis
  • The green triangle resizes the object along the plane perpendicular to its y-axis
  • The blue triangle resizes the object along the plane perpendicular to its z-axis

Multi-select & Grouping

If you have multiple object selection activated and multiple objects selected, the gizmo treats them as a group. It positions itself at the average center point of the group of objects, it orients itself to align with the World Anchor, and it acts on all selected objects simultaneously. Note this grouping behavior is different than when you have multiple objects selected and use freeform gestures to manipulate the objects.

Position

When multiple objects are selected, the Position gizmo moves the selected objects along axes aligned with the World Anchor:

  • The red arrow moves objects side-to-side with respect to the World Anchor
  • The green arrow moves objects up-and-down (same as two-finger swipe)
  • The blue arrow moves objects forward-and-back with respect to the World Anchor
  • The red triangle moves objects on a plane perpendicular to the World Anchor’s x-axis
  • The green triangle moves objects on a horizontal plane (same as one-finger swipe)
  • The blue triangle moves objects on a plane perpendicular to the World Anchor’s z-axis

Rotation

When multiple objects are selected, the Rotation gizmo rotates all the selected objects around the average center point of the group, using axes aligned with the World Anchor:

  • The red ring rotates objects forward-and-back with respect to the World Anchor
  • The green ring rotates objects around the group center point on a horizontal plane
  • The blue ring rotates objects side-to-side with respect to the World Anchor

Tip: When multiple objects are selected, the Rotation gizmo’s green ring is NOT the same as the rotation gesture. If you want to rotate multiple objects around their individual centers, use the two-fingered twist gesture. If you want to rotate multiple objects around the average center point of that group of objects, use the Rotation gizmo’s green ring.

Scale

When multiple objects are selected, using any part of the Scale gizmo scales the objects uniformly along all axes, using the average center of the group as the center point to scale from.

Still need help? Contact Us Contact Us