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.

Follow along in the live web editor

Open a scene in your browser — no install: ▶ Open the editor-tutorial scene. The gizmo (select + W/E/R or the palette) works fully online, and you can browse the Assets panel. Dragging model/prefab assets in to add them needs the local dev editor (npm run dev), which ships the full template asset library — the hosted editor’s browser storage starts with just the starter scene.

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).

   

   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.

   

   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).

   

   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). Different asset kinds do different things: double-click a scene (.vscn) or prefab to open/load it — scenes aren’t dragged into the viewport, they replace what you’re editing. Models (.glb) and prefabs are the assets you drag into the viewport or hierarchy to add them to the current scene.

   

   The asset browser, opened to the scenes folder — double-click a scene to open it.

   Hosted vs local

   In the hosted editor the Assets panel shows your browser project’s folders, which start minimal (a scenes folder with the starter scene). The full example asset library — the models/, prefabs/, and example scenes you can drag in — ships with the local dev template (npm run dev).

What this clip does and doesn't show

The gizmo’s handles are shown for all three modes; actually dragging them (and drag-drop of a model/prefab into the scene) are pointer-precise gestures we don’t script in the headless capture — do them live in the local dev editor. Edit ops (duplicate, copy/paste, undo/redo, select-all) live on the assets, prefabs & ops page.

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

• Viewport · Assets, prefabs & ops · A tour of the editor panels