Skip to content

Commit

Permalink
Refactor: update viewport doc (#2531)
Browse files Browse the repository at this point in the history 
* refactor: viewport doc
  • Loading branch information
@eyworldwide
eyworldwide authored Jan 24, 2025
1 parent 7814b04 commit 58a11a4
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 31 deletions.
33 changes: 17 additions & 16 deletions docs/en/interface/viewport.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ label: Basics/Interface

The view window is an interactive interface used for selecting, positioning, and changing various types of entities and components in the current scene.

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

## Browsing the Scene

Expand All @@ -21,7 +21,7 @@ There are two ways to browse the scene: standard mode and flying mode. Standard
| **Standard** | Orbit rotation | `alt` + Left Mouse Button |
| | Panning | `alt` + `command` + Left Mouse Button, or press the mouse wheel |
| | Zooming | `alt` + `control` + Left Mouse Button, or scroll mouse wheel, or swipe with two fingers on a trackpad |
| **Flying** | Look around camera | `alt` + Right Mouse Button |
| **Flying** | Look around camera | alt + Right Mouse Button |
| | Move forward | Up Arrow or Right Mouse Button + `W` |
| | Move backward | Down Arrow or Right Mouse Button + `S` |
| | Strafe left | Left Arrow or Right Mouse Button + `A` |
Expand All @@ -34,32 +34,33 @@ There are two ways to browse the scene: standard mode and flying mode. Standard

The toolbar is located at the top of the view window. Hovering the mouse over each item will show the shortcut keys or description.

<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*XJN-T5q2L_AAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131181207870" style={{zoom:"50%"}} />
<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 |
| --- | --- | --- | --- |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/1bfc4f69-a88e-4efb-a001-cc1d145d9639/image-20240131175906508.png" style={{zoom:"50%"}} /> | Drag | Drag the screen | |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/538ee5d8-a97c-4d88-98c7-f207873d74ab/image-20240131180117064.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/72016aba-4f42-4683-9d26-b2525cd207be/image-20240131180217044.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/56cdaed5-fddf-4aa7-813d-8c00056c2802/image-20240131180256738.png" style={{zoom:"50%"}} /> | Move<br />Rotate<br />Scale | Transform the selected entity | `W` <br /> `E` <br />`R` |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/305d83a5-5ed8-4651-81cc-4cf4688a5dd3/image-20250124173959148.png" style={{zoom:"50%"}} /> | Drag | Drag the screen | |
| <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 the selected entity | `W` <br /> `E` <br />`R` |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/37eec76d-a1f5-4687-862b-656bc59b781b/image-20250124174459582.png" style={{zoom:"50%"}} /> | Rect Edit Tool | Drag and scale sprites, GUI elements | |
| <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%"}} /> | Center Anchor/Hub Anchor | Switch the anchor point of the selected entity | |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/41fa937d-f4e8-4475-a0a5-9278c3ce69da/image-20240131180709163.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/World Coordinates | Switch the coordinates of the selected entity | |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/57a9b6be-14ff-4eb3-994f-2175bd7c4d75/image-20240131181105676.png" style={{zoom:"50%"}} /> | Focus | Focus the scene camera on the selected entity | `F` |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/dd1abc49-d43b-4a4b-8941-e3fc5e3575ec/image-20240131181429677.png" style={{zoom:"50%"}} /> | Scene Camera | The scene camera menu contains options for configuring the scene camera, mainly to solve issues where objects are not visible because the clipping plane is too far or too near. These adjustments do not affect settings of entities with camera components in the scene. | |
| <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/World Coordinates | Switch the coordinates of the selected entity | |
| <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 contains options for configuring the scene camera, mainly to solve issues where objects are not visible because the clipping plane is too far or too near. These adjustments do not affect settings of 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 contains options to adjust view auxiliary displays, including grids, auxiliary icons (graphics associated with specific components in the scene, including camera, direct light, point light, spotlight), 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 | Switch 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 | Conveniently switch between 2D/3D scene modes. In 2D mode, navigation components, and perspective/orthographic toggle are disabled, and orbit rotation in navigation is no longer effective. | |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/408bf2c2-8238-4c23-98f4-ee02787fd69f/image-20240131182235406.png" style={{zoom:"50%"}} /> | Fullscreen/Restore | Maximize the view window, minimize hierarchy, assets, inspector | |
| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*zsduSKvepO0AAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> | Play | Play all particles and animations in the scene |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/c37591e0-6eb0-48ae-9faa-2d5b1a0e7941/image-20240131182303867.png" style={{zoom:"50%"}} /> | Screenshot | Take a snapshot of the current scene. Only user-created entities in the scene are shown, and a series of auxiliary tools like icons, grids, gizmo won't be included. After taking a screenshot, the snapshot will be used as the project thumbnail on the homepage. |
| <img src="https://gw.alipayobjects.com/zos/OasisHub/1d338399-5da9-4589-a6fa-07e6d2d28f9c/image-20250124175716190.png" style={{zoom:"50%"}} /> | Fullscreen/Restore | Maximize the view window, minimize hierarchy, assets, 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 shown, and a series of auxiliary tools like icons, grids, gizmo won't be included. After taking a screenshot, the snapshot will be used as the project thumbnail on the homepage. ||

### Auxiliary Element Settings Interface

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

| Property | Description |
| --- | --- |
| Grid | Whether the grid is displayed in the view |
| 3D Icons | Whether auxiliary icons scale based on their distance from the camera |
| Navigation Gizmo | Used to display the current direction of the scene camera and can be quickly modified by mouse operation to adjust the view and projection mode (orthographic/perspective). It will appear at the bottom right corner of the screen when open.<br /><img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131184405058"/> |
| Navigation Gizmo | Used to display the current direction of the scene camera and can be quickly modified by mouse operation to adjust the view and projection mode (orthographic/perspective). It will appear at the bottom right corner of the screen when open.<br /><Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> |
| Outline | Whether outlines are displayed when an entity is selected. The outline of the selected entity is orange, and child nodes are blue. |
| Camera | Display the selected camera component as a cone |
| Light | Display light source components |
Expand All @@ -69,7 +70,7 @@ The toolbar is located at the top of the view window. Hovering the mouse over ea

### Scene Camera Settings Interface

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

| Property | Description | Default Value |
| :----------------------------- | :----------------------------------------------------- | :------------------- |
Expand All @@ -86,7 +87,7 @@ The toolbar is located at the top of the view window. Hovering the mouse over ea

When an entity with a camera component is selected, the real-time preview of that camera will be displayed at the bottom left of the view window. This helps users adjust the camera and scene position in real-time. The preview window can be dragged, locked, and switched between different device proportions.

<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*6IztTr2AERQAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131190013320"/>
<Image src="https://gw.alipayobjects.com/zos/OasisHub/1fe28869-7719-4387-b2fb-7299cfa87b69/image-20250124180405339.png" style={{zoom:"50%"}} />

| Property | Description |
| :----------- | :-------------------------------- |
Expand All @@ -97,4 +98,4 @@ When an entity with a camera component is selected, the real-time preview of tha

Objects containing camera components in the hierarchy tree can directly sync the scene camera's attributes, making position and view adjustments convenient.

<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*IEaMQYLe1HgAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
<Image src="https://gw.alipayobjects.com/zos/OasisHub/8a066115-69e2-4010-92cd-dbcdf663011c/image-20250124180616875.png" style={{zoom:"50%"}} />
Loading

0 comments on commit 58a11a4

Please sign in to comment.