mirror of
https://github.com/galacean/engine.git
synced 2026-05-09 16:27:45 +08:00
102 lines
10 KiB
Plaintext
102 lines
10 KiB
Plaintext
---
|
||
order: 6
|
||
title: 视图区
|
||
type: 基础知识
|
||
group: 界面
|
||
label: Basics/Interface
|
||
---
|
||
|
||
## 简介
|
||
|
||
视图窗口是用于选择、定位、更改当前场景中各种类型实体及组件的交互式界面。
|
||
|
||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/561da75f-74e2-4fb3-842c-fb7e43819cfe/image-20250124173601599.png" />
|
||
|
||
## 浏览场景
|
||
|
||
浏览场景有两种方式，分别为标准模式和飞行模式。标准模式是绕着中心视点转，飞行模式适合大型场景浏览，即场景相机在三维空间中前后左右上下移动。
|
||
|
||
| 模式 | 操作 | 快捷键 |
|
||
| :----------- | :----------- | ---------------------------------------------------------------------- |
|
||
| **标准模式** | 环绕轨道 | `alt` + 鼠标左键 |
|
||
| | 平移 | `alt` + `command` + 鼠标左键， 或者 按下鼠标滚轮 |
|
||
| | 缩放 | `alt` + `control` + 鼠标左键，或者 滚动鼠标滚轮，或者 触控板上双指轻扫 |
|
||
| **飞行模式** | 围绕相机观察 | alt + 鼠标右键 |
|
||
| | 前进 | 方向键向上，或者 鼠标右键 + `W` |
|
||
| | 后退 | 方向键向下，或者 鼠标右键 + `S` |
|
||
| | 左平移 | 方向键向左，或者 鼠标右键 + `A` |
|
||
| | 右平移 | 方向键向右，或者 鼠标右键 + `D` |
|
||
| | 向上移动 | 鼠标右键 + `E` |
|
||
| | 向下移动 | 鼠标右键 + `Q` |
|
||
| | 改变飞行速度 | 鼠标右键 + 鼠标滚轮 |
|
||
|
||
## 工具栏
|
||
|
||
工具栏位于视图窗口中上，鼠标停留会出现每一项的快捷键，或者内容说明。
|
||
|
||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/ddaa0d5e-25e4-40ba-ba20-92a0205d538e/image-20250124173818912.png" alt="image-20240131181207870" style={{zoom:"50%"}} />
|
||
|
||
| 图标 | 名称 | 解释 | 快捷键 |
|
||
| --- | --- | --- | --- |
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/305d83a5-5ed8-4651-81cc-4cf4688a5dd3/image-20250124173959148.png" style={{zoom:"50%"}} /> | 拖动 | 拖动画面 | |
|
||
| <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%"}} /> | 移动<br />旋转<br />缩放 | 对选中实体进行变换操作 | `W` <br /> `E` <br />`R` |
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/37eec76d-a1f5-4687-862b-656bc59b781b/image-20250124174459582.png" style={{zoom:"50%"}} /> | 矩形编辑工具 | 拖拽和缩放精灵、GUI 元素 | `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%"}} /> | 中心锚点/枢纽锚点 | 切换选中实体的锚点 | |
|
||
| <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%"}} /> | 本地坐标/世界坐标 | 切换选中实体的坐标 | |
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/1b57725d-900e-4911-9524-449df488cfe0/image-20250124175401106.png" style={{zoom:"50%"}} /> | 聚焦 | 场景相机聚焦到的选中实体 | `F` |
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/2170327b-38b6-408c-81fd-cacb6b2f9f6d/image-20250124175517475.png" style={{zoom:"50%"}} /> | 场景相机 | 场景相机菜单包含用于配置场景相机的选项，主要用来解决搭建场景时，裁剪面太远或者太近导致看不到物体的问题。这些调整不会影响场景中带有相机组件的实体的设置。 | |
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" style={{zoom:"50%"}} /> | 设置 | 设置菜单包含用于调整视图辅助显示的选项，包括网格、辅助图标（与场景中特定组件相关联的图形，包括相机、直射光、点光源、聚光灯）、 辅助线框 | |
|
||
| <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%"}} /> | 场景相机类型 | 切换透视/正交相机 | |
|
||
| <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%"}} /> | 模式 | 方便在 2D/3D 场景模式间进行点击切换。2D 模式下，导航部件、正交/透视切换关闭，导航中的环绕轨道不再生效。 | |
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/1d338399-5da9-4589-a6fa-07e6d2d28f9c/image-20250124175716190.png" style={{zoom:"50%"}} /> | 全屏/复原 | 最大化视图窗口，最小化层级、资产、检查器 | |
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/eabb81ce-57f1-4761-bd32-cb5ae22c952e/image-20250124175804174.png" style={{zoom:"50%"}} /> | 播放 | 播放场景中所有粒子、动画 ||
|
||
| <img src="https://gw.alipayobjects.com/zos/OasisHub/18aa192b-0a68-4f18-9b8f-771e01ad429a/image-20250124175846556.png" style={{zoom:"50%"}} /> | 截屏 | 对当前场景进行快照。仅显示场景内用户创建实体，辅助显示的一系列工具，如图标、网格、gizmo 不会被计入其中。进行截屏后，该快照会在首页作为该项目缩略图。 ||
|
||
|
||
### 场景相机设置界面
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*hq_1RL3LpLQAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
| 属性 | 内容 | 默认值 |
|
||
| :--------------------------- | :----------------------------------------------------------- | :------------------- |
|
||
| 视野（Fov） | 场景相机的视野 | 60 |
|
||
| 动态裁剪（Dynamic） | 若开启，则会自动计算场景相机的近裁面和远裁面 | 开启 |
|
||
| 近裁面（Near Plane） | 手动调整相对于场景相机的最近点 | 勾选动态裁剪后隐藏 |
|
||
| 远裁面（Far Plane） | 手动调整相对于场景相机的最远点 | 勾选动态裁剪后隐藏 |
|
||
| 平滑（Smooth） | 开启后相机的移动，旋转与围绕会更加平滑 | 开启 |
|
||
| 缓动（Ease） | 开启后相机会在漫游的开始与结束时缓动 | 开启 |
|
||
| 加速度（Acceleration） | 开启后漫游时会以固定的比例提高相机的漫游速度，反之则一直按照设置的速度移动 | 开启 |
|
||
| 速度（Speed） | 相机的漫游速度 | 8 |
|
||
|
||
### 辅助元素设置界面
|
||
|
||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/c3a62155-693d-4f8d-9fb1-79c3da94a4c6/image-20250124180009153.png" style={{zoom:"50%"}} />
|
||
|
||
| 属性 | 内容 |
|
||
| --- | --- |
|
||
| 网格（Grid） | 是否显示视图中的网格 |
|
||
| 3D 图标（3D Icons） | 若开启，辅助图标则会随着相机距离近大远小 |
|
||
| 导航 Gimzo | 开启后会在 viewport 右下角显示场景相机的当前方向，并且通过鼠标操作可以快速修改视角。<br /><Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> |
|
||
| 轮廓显示（Outline） | 选中某个实体时是否显示轮廓，选中的实体轮廓颜色为橙色，子节点轮廓为蓝色 |
|
||
| 相机（Camera） | 选中相机节点时是否显示视锥体辅助性 |
|
||
| 光源（Light） | 选中光源节点时是否显示光线辅助线 |
|
||
| 静态碰撞体（Static Collider） | 是否显示静态碰撞体形状 |
|
||
| 动态碰撞体（Dynamic Collider） | 是否显示动态碰撞体形状 |
|
||
| 发射器形状（Emission Shape） | 是否显示粒子发射器形状 |
|
||
|
||
## 预览
|
||
|
||
选中带有相机组件的实体时，会在视图窗口左下角显示该相机的实时预览。帮助用户实时调整相机、场景位置。预览窗口可以拖动、锁定，并且切换不同设备比例的窗口。
|
||
|
||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/9ed128aa-72f2-4835-a694-3c8aedc8b069/image-20250515105414407.png" alt="image-20250515105414407" style={{zoom:"50%"}} />
|
||
|
||
| 属性 | 内容 |
|
||
| :---------- | :--------------------------- |
|
||
| 1. 拖动 | 自由拖动预览窗口 |
|
||
| 2. 定位 | 定位该相机在场景中的位置 |
|
||
| 3. 切换比例 | 切换不同设备、不同比例的窗口 |
|
||
| 4. 锁定 | 锁定相机预览窗口 |
|
||
|
||
在层级树中包含相机组件的物体，可以直接同步视图的场景相机的相关属性，方便进行位置和视角的调整。
|
||
|
||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/8a066115-69e2-4010-92cd-dbcdf663011c/image-20250124180616875.png" style={{zoom:"50%"}} />
|