Skip to content
vgai Learn

The transform gizmo & asset browser

tutorial lesson Beginner ⏱ 7 min vgai 0.1.0

Prerequisites: Installed vgai and run the editor (Get Started)

What you'll learn

  • Select an entity and see the transform gizmo
  • Switch the gizmo between Move, Rotate, and Scale
  • Browse the asset library and open a folder

What you'll build: A guided tour of the transform gizmo's three modes and the asset browser.

Walkthrough — The transform gizmo & asset browser · generated by site/media/lessons/editor-ops.lesson.ts (4 steps)

Selecting an entity gives you the transform gizmo — the on-object handles you drag to move, rotate, and scale. It has three modes (Move / Rotate / Scale), switchable from the toolbar, the W/E/R hotkeys, or the command palette. This lesson switches modes from the palette so each change is explicit.

Steps

Section titled “Steps”

  1. Select an entity — the Move gizmo appears. Click an entity in the hierarchy (or the viewport). The Move gizmo’s colored axis arrows appear on it (red = X, green = Y, blue = Z).

    An entity selected with the Move gizmo's axis arrows
    Selection shows the Move gizmo (axis arrows).

  2. Switch to Rotate mode — the gizmo shows rotation rings. Run Rotate Mode from the command palette (Ctrl+K). The arrows become rings you’d drag to spin the object about each axis.

    The gizmo in Rotate mode showing colored rings
    Rotate mode: the gizmo becomes rotation rings.

  3. Switch to Scale mode — the gizmo shows box handles. Run Scale Mode. The handles become boxes you’d drag to scale along each axis (or uniformly from the center).

    The gizmo in Scale mode showing box handles
    Scale mode: the gizmo becomes box handles.

  4. Browse the asset library — open the scenes folder. The bottom Assets panel is a folder tree; double-click a folder to open it. Here scenes opens to its .vscn files (with the breadcrumb / scenes). Drag an asset into the viewport or hierarchy to add it.

    The asset browser opened to the scenes folder
    The asset browser, opened to the scenes folder.

Recap

New functionality

  • Selected an entity to get the transform gizmo
  • Switched the gizmo between Move, Rotate, and Scale
  • Browsed the asset library and opened a folder

New concepts & skills

  • Selection drives the gizmo; modes are Move/Rotate/Scale (W/E/R, toolbar, or palette)
  • Each mode shows distinct handles: arrows / rings / boxes
  • The asset browser is a folder tree; assets drag into the viewport or hierarchy

Next lesson → Assets, prefabs & ops

See also

Section titled “See also”