Files
engine/docs/en/interface/viewport.md
2024-08-05 16:03:57 +08:00

11 KiB

order, title, type, group, label
order title type group label
6 Viewport Basics Interface Basics/Interface

Introduction

The viewport window is an interactive interface used to select, position, and change various types of entities and components in the current scene.

drag5

Browsing the Scene

There are two ways to browse the scene: standard mode and flight mode. Standard mode rotates around the center viewpoint, while flight mode is suitable for browsing large scenes, where the scene camera moves forward, backward, left, right, up, and down in three-dimensional space.

Mode Operation Shortcut Key
Standard Mode Orbit alt + left mouse button
Pan alt + command + left mouse button, or press the mouse wheel
Zoom alt + control + left mouse button, or scroll the mouse wheel, or swipe with two fingers on the touchpad
Flight Mode Look around 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 wheel

Toolbar

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

image-20240131181207870
Icon Name Description Shortcut Key
image-20240131175906508 Drag Drag the view
image-20240131180117064
image-20240131180217044
image-20240131180256738
Move
Rotate
Scale
Transform the selected entity W
E
R
image-20240131180403373
image-20240131180513384
Center Pivot/Hub Pivot Switch the pivot of the selected entity
image-20240131180709163
image-20240131180731465
Local Coordinates/World Coordinates Switch the coordinates of the selected entity
image-20240131181105676 Focus Focus the scene camera on the selected entity F
image-20240131181429677 Scene Camera The scene camera menu contains options for configuring the scene camera, mainly used to solve the problem of objects not being visible when the clipping plane is too far or too close while building the scene. These adjustments will not affect the settings of entities with camera components in the scene.
image-20240131181144755 Settings The settings menu contains options for adjusting auxiliary displays in the view, including grids, auxiliary icons (graphics associated with specific components in the scene, including cameras, directional lights, point lights, spotlights), and auxiliary wireframes
image-20240131181242445
image-20240131181524219
Scene Camera Type Switch between perspective/orthographic camera
image-20240131181459432
image-20240131181607999
Mode Convenient for switching between 2D/3D scene modes with a click. In 2D mode, navigation components, orthographic/perspective switching are disabled, and orbiting in navigation is no longer effective.
image-20240131182235406 Fullscreen/Restore Maximize the viewport window, minimize the hierarchy, assets, and inspector
Play Play all particles and animations in the scene
image-20240131182303867 Screenshot Take a snapshot of the current scene. Only user-created entities in the scene are displayed; a series of auxiliary display tools such as icons, grids, and gizmos will not be included. After taking a screenshot, the snapshot will be used as the project thumbnail on the homepage.

Auxiliary Elements Settings Interface

Attribute Content
Grid Whether the grid in the view is displayed
3D Icons Whether auxiliary icons scale based on the distance between the component and the camera
Navigation Gimzo Used to display the current direction of the scene camera and can quickly modify the view and projection mode (orthographic/perspective) through mouse operations. When enabled, it will be displayed in the lower right corner of the screen.
image-20240131184405058
Outline Whether to display the outline when an entity is selected. The outline color of the selected entity is orange, and the outline of child nodes is blue
Camera Display the selected camera component as a cone
Light Display light source components
Static Collider Display the shape of static colliders
Dynamic Collider Display the shape of dynamic colliders
Emission Shape Display the shape of particle emitters

Scene Camera Settings Interface

image-20240131185805023
Attribute Content Default Value
Fov The field of view of the scene camera 60
Dynamic Clipping Automatically calculate the near and far clipping planes of the scene camera relative to the selected entity and the scene camera position Off
Near Plane Manually adjust the nearest point relative to the scene camera Enabled when dynamic clipping is unchecked
Far Plane Manually adjust the farthest point relative to the scene camera Enabled when dynamic clipping is unchecked
Speed The movement speed of the camera in flight mode 10
Opaque Texture Enable opaque texture for the scene camera Off
HDR Enable HDR for the scene camera Off
Post Process Enable post-processing for the scene camera On

Preview

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

image-20240131190013320
Attribute Content
Drag Freely drag the preview window
Position Position the camera in the scene
Switch Ratio Switch windows of different devices and ratios
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, making it convenient to adjust the position and perspective.