engine/docs/en/interface/viewport.mdx

---
order: 6
title: Viewport
type: Basics
group: Interface
label: Basics/Interface
---

## Introduction

The viewport window is an interactive interface used for selecting, positioning, and modifying various types of entities and components within the current scene.

<Image src="https://gw.alipayobjects.com/zos/OasisHub/561da75f-74e2-4fb3-842c-fb7e43819cfe/image-20250124173601599.png" />

## Navigating the Scene

There are two modes for navigating the scene: standard mode and flight mode. Standard mode rotates around a central viewpoint, while flight mode is suitable for browsing large scenes, allowing the scene camera to move forward, backward, left, right, up, and down in 3D space.

| Mode          | Operation          | Shortcut Keys                                                          |
| :------------ | :----------------- | ---------------------------------------------------------------------- |
| **Standard Mode** | Orbit            | `alt` + left mouse button                                              |
|                | Pan               | `alt` + `command` + left mouse button, or press the mouse scroll wheel |
|                | Zoom              | `alt` + `control` + left mouse button, or scroll the mouse wheel, or swipe with two fingers on the trackpad |
| **Flight Mode** | Orbit around camera | `alt` + right mouse button                                             |
|                | Move forward      | Up arrow key, or right mouse button + `W`                              |
|                | Move backward     | Down arrow key, or right mouse button + `S`                            |
|                | Move left         | Left arrow key, or right mouse button + `A`                            |
|                | Move right        | Right arrow key, or right mouse button + `D`                           |
|                | Move up           | Right mouse button + `E`                                               |
|                | Move down         | Right mouse button + `Q`                                               |
|                | Change flight speed | Right mouse button + mouse scroll wheel                                |

## Toolbar

The toolbar is located at the top of the viewport window. Hovering over each item will display its shortcut keys or description.

<Image src="https://gw.alipayobjects.com/zos/OasisHub/ddaa0d5e-25e4-40ba-ba20-92a0205d538e/image-20250124173818912.png" alt="image-20240131181207870" style={{zoom:"50%"}} />

| Icon | Name | Description | Shortcut Keys |
| --- | --- | --- | --- |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/305d83a5-5ed8-4651-81cc-4cf4688a5dd3/image-20250124173959148.png" style={{zoom:"50%"}} /> | Drag | Drag the view |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/e394dc30-4c43-47b7-8f86-583b4d084be6/image-20250124174121219.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/96e3c7d0-f60f-42e8-b8f4-f7abaf220bd6/image-20250124174235448.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/aa7f328b-6947-4216-92c8-7c869ff3e340/image-20250124174327332.png" style={{zoom:"50%"}} /> | Move<br />Rotate<br />Scale | Transform operations on selected entities | `W` <br /> `E` <br />`R` |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/37eec76d-a1f5-4687-862b-656bc59b781b/image-20250124174459582.png" style={{zoom:"50%"}} /> | Rectangle Edit Tool | Drag and scale sprites, GUI elements  | `T` |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/33b47020-ab3d-4acd-baa9-b7d111e1c5d0/image-20240131180403373.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/40faa545-0352-47c6-a704-880821e542ca/image-20240131180513384.png" style={{zoom:"50%"}} /> | Pivot Point/Anchor | Toggle the anchor point of selected entities |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/acc22d85-df2a-4cf7-bd59-f66430bbfef8/image-20250124175035351.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" style={{zoom:"50%"}} /> | Local/Global Coordinates | Toggle the coordinate system of selected entities |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/1b57725d-900e-4911-9524-449df488cfe0/image-20250124175401106.png" style={{zoom:"50%"}} /> | Focus | Focus the scene camera on the selected entity | `F` |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/2170327b-38b6-408c-81fd-cacb6b2f9f6d/image-20250124175517475.png" style={{zoom:"50%"}} /> | Scene Camera | The scene camera menu includes options for configuring the scene camera, mainly used to solve the issue of clipping planes being too far or too close, causing objects to be invisible. These adjustments do not affect entities with camera components in the scene. |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" style={{zoom:"50%"}} /> | Settings | The settings menu includes options for adjusting auxiliary displays in the view, such as grids, auxiliary icons (graphics associated with specific components in the scene, including cameras, directional lights, point lights, spotlights), and auxiliary wireframes. |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/f05e1699-9495-49fd-b123-6e501af0e023/image-20240131181242445.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/739fb9f1-309b-497a-86b6-f3d4ef89d7ee/image-20240131181524219.png" style={{zoom:"50%"}} /> | Scene Camera Type | Toggle between perspective/orthographic camera |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/8a596654-17f6-4c97-b18e-b0188b05220d/image-20240131181459432.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/7f101795-7966-40b8-a61a-1504a3224e7a/image-20240131181607999.png" style={{zoom:"50%"}} /> | Mode | Easily toggle between 2D/3D scene modes. In 2D mode, navigation components, orthographic/perspective switching are disabled, and orbiting in navigation is no longer effective. |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/1d338399-5da9-4589-a6fa-07e6d2d28f9c/image-20250124175716190.png" style={{zoom:"50%"}} /> | Fullscreen/Restore | Maximize the viewport window, minimize hierarchy, assets, and inspector |  |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/eabb81ce-57f1-4761-bd32-cb5ae22c952e/image-20250124175804174.png" style={{zoom:"50%"}} /> | Play | Play all particles and animations in the scene ||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/18aa192b-0a68-4f18-9b8f-771e01ad429a/image-20250124175846556.png" style={{zoom:"50%"}} /> | Screenshot | Take a snapshot of the current scene. Only user-created entities in the scene are displayed; auxiliary display tools like icons, grids, and gizmos are not included. After taking a screenshot, it will be used as the project thumbnail on the homepage. ||


### Scene Camera Settings Interface

<Image src="https://gw.alipayobjects.com/zos/OasisHub/5d0577f7-8402-4a8c-b219-8ec36578bd05/image-20250124180220754.png" style={{zoom:"50%"}} />

| Attribute                         | Description                                                         | Default Value       |
| :--------------------------- | :----------------------------------------------------------- | :------------------- |
| Field of View (FOV)                  | The field of view of the scene camera                                               | 60                   |
| Dynamic Clipping          | If enabled, the near and far clipping planes of the scene camera will be automatically calculated. | on               |
| Near Plane         | Manually adjusts the nearest point relative to the scene camera                               | Hide when dynamic clipping is checked |
| Far Plane          | Manually adjusts the farthest point relative to the scene camera                               | Hide when dynamic clipping is checked |
| Smooth | If enabled, the camera's movement, rotation and rotation will be smoother                                      | on                 |
| Ease                          |  If enabled, the camera will ease at the beginning and end of the tour.              | on                 |
| Acceleration       |  If enabled, the camera's roaming speed will be increased at a fixed ratio during roaming. Otherwise, it will always move at the set speed.        | On                 |
| Speed                | The movement speed of the camera in flight mode                                     | 10                   |

### Auxiliary Elements Settings Interface

<Image src="https://gw.alipayobjects.com/zos/OasisHub/c3a62155-693d-4f8d-9fb1-79c3da94a4c6/image-20250124180009153.png" style={{zoom:"50%"}} />

| Attribute | Description |
| --- | --- |
| Grid | Whether the grid in the view is displayed |
| 3D Icons | Whether auxiliary icons will increase or decrease as the camera moves closer or further away |
| Navigation Gizmo | Displays the current direction of the scene camera and allows for quick modifications of the view (orthographic/perspective) via mouse operations. It appears in the lower-right corner of the screen when enabled.<br /><Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> |
| Outline Display | Whether to show an outline when an entity is selected. The selected entity's outline is orange, and the child node outlines are blue. |
| Camera | Whether to show the frustum auxiliary function when the camera node is selected |
| Light | Whether to display light auxiliary lines when selecting a light source node |
| Static Collider | Displays the shape of static colliders |
| Dynamic Collider | Displays the shape of dynamic colliders |
| Emission Shape | Displays the shape of particle emitters |

## Preview

When an entity with a camera component is selected, a real-time preview of that camera is displayed in the lower-left corner of the viewport window. This helps users adjust the camera and scene position in real-time. The preview window can be dragged, locked, and switched to different device aspect ratios.

<Image src="https://gw.alipayobjects.com/zos/OasisHub/9ed128aa-72f2-4835-a694-3c8aedc8b069/image-20250515105414407.png" alt="image-20250515105414407" style={{zoom:"50%"}} />

| Attribute        | Description                         |
| :---------- | :--------------------------- |
| 1. Drag     | Freely drag the preview window             |
| 2. Position     | Position the camera in the scene     |
| 3. Switch Aspect Ratio | Switch to different device and aspect ratio windows |
| 4. Lock     | Lock the camera preview window             |

In the hierarchy tree, objects containing camera components can directly synchronize the relevant properties of the scene camera in the view, facilitating position and view angle adjustments.

<Image src="https://gw.alipayobjects.com/zos/OasisHub/8a066115-69e2-4010-92cd-dbcdf663011c/image-20250124180616875.png" style={{zoom:"50%"}} />