一、Qt Design Studio 3D 设计的优势
Qt Design Studio 是一个专注于创建高性能用户界面(UI)的设计工具,它在设计3D界面方面具有一下显著优势:
1、一体化工作流
**1)设计与开发无缝集成:**设计师和开发者可以在同一环境中协作,无需反复转换文件格式或工具。
**2)支持Qt Quick 和 3D:**直接集成了 2D 和 3D 界面的设计工具,支持 QML 和 3D 技术的混合使用。
2、实时预览和高效迭代
**1)实时预览:**设计师可以实时查看 3D 界面效果,无需编译或使用额外的渲染工具。
**2)快速迭代:**修改可以即时反映到 UI 设计中,方便调整。
3、3D 渲染性能优化
**1)Qt 3D 引擎支持:**支持基于Qt 3D 的高性能渲染,能够直接在多平台上运行。
**2)硬件加速:**借助 GPU 加速和优化的 3D 渲染技术,确保最终界面的流畅运行。
4、强大的资源管理
**1)支持多种格式:**可以直接导入流行的 3D 文件格式(如 FBX、OBJ 等),简化了资源管理。
**2)统一资源管理器:**设计师可以方便地管理模型、材质、纹理和其他资源。
5、交互式设计能力
**1)动态效果支持:**支持 3D 动画和交互设计,用户可以创建复杂的动态场景。
**2)逻辑绑定:**设计中的动态交互可以直接绑定到 QML 脚本逻辑。
6、多平台支持
**1)跨平台开发:**创建的 3D 界面可以直接部署到多个平台(如 Windows、Linux、macOS、IOS 和 Android)。
**2)一致的用户体验:**确保在不同平台上呈现一致的 3D 效果。
7、插件与扩展性
**1)第三方工具集成:**可以与 Blender、Maya 等3D工具集成,支持通过插件增强功能。
**2)开放性:**支持自定义的模块和插件,扩展设计能力。
8、用户体验优化
**1)流畅的交互体验:**Qt 的高性能架构确保 3D 界面在各种设备上运行流畅。
**2)丰富的控件支持:**提供了大量可直接使用的 UI 组件和控件,大大简化了设计复杂界面的过程。(初学者可查阅官方文档Qt Design Studio 官方文档或个人主页Qt Design Studio 常用组件进行了解学习)
二、入门学习一个 3D 项目
1、创建 3D 项目
进入Qt Design Studio 后选择创建项目,在创建界面自定义窗口尺寸、项目名称、存放路径以及默认格式,如上图所示,创建一个 1600 × 900 尺寸的 3D 项目,命名为Test(延续 Qt 的格式,项目名称与类名称首字母需大写),选择官方提供的 default 格式,点击 create 即可创建成功。
2、Qt Design Studio 主界面常用功能介绍
如上图,菜单栏 view → views 可通过勾选指定模块在主界面显示,新建项目默认开启如图所示的模块。下面将分别介绍不同常用模块及其功能。
2.1 Navigator
1)功能:
- 显示项目中的 UI 组件层次结构,类似于场景树或层级视图。
- 设计师可以在 Navigator 中查看、选择、组织和管理 UI 元素。
2)特点:
- 以树状结构列出所有元素,方便查看父子关系。
- 支持拖放操作,用于调整组件的层次结构。
- 提供搜索功能,快速定位特定元素。
3)典型用途:
- 调整组件的布局。
- 删除、隐藏和锁定特定 UI 元素。
2.2 Projects
1)功能:
- 管理整个项目的文件和文件夹结构。
- 显示与项目相关的所有资源(QML 文件、3D 模型、图像、脚本等)。
2)特点:
- 文件系统视图,按物理文件夹结构显示内容。
- 支持对文件进行操作(重命名、移动、删除)。
3)典型用途:
- 导航到特定资源文件。
- 快速查看项目结构是否完整。
- 添加新资源到项目中。
2.3 Components
1)功能:
- 列出所有可用的 UI 组件(控件、布局、3D 元素等)。
- 包括预定义的 Qt Quick 组件和用户自定义组件。
2)特点:
- 组件按类别组织(如基本控件、容器、3D 物体)。
- 支持直接拖放组件到设计画布。
3)典型用途:
- 向界面中添加新的 UI 元素(按钮、滑块、标签等)。
- 快速浏览和选择所需组件。
2.4 Assets
1)功能:
- 管理和预览所有项目资源,包括图片、纹理、3D 模型、字体等。
2)特点:
- 提供资源的缩略图预览。
- 支持拖放资源到界面设计中。
- 可对资源进行简单管理(如重命名、删除)。
3)典型用途:
- 添加图像作为背景或纹理。
- 导入各种自定义组件或 3D 模型。
- 替换资源以更新设计。
2.5 3D
1)功能:
- 提供 3D 场景的设计和管理工具。
- 支持导入和编辑 3D 模型、调整光照、相机视角等。
2)特点:
- 提供 3D 视图,实时查看模型和动画效果。
- 支持调整 3D 对象的位置、旋转和缩放。
笔者找了很久的快捷键,此处特别指出:
滚轮 → 界面缩放
Alt + 鼠标左键 → 旋转视角
Alt + 长按鼠标滚轮 → 平移视角
- 提供材质和纹理编辑功能。
3)典型用途:
- 添加和配置 3D 场景中的物体。
- 调整相机视角以优化显示。
- 为 UI 添加动态的 3D 效果。
2.6 2D
1)功能:
- 用于设计和调整 2D 界面元素。
- 提供画布视图,支持直接拖放、排列和调整元素。
2)特点:
- 提供网格和对齐工具,方便布局设计。
- 支持在 2D 和 3D 场景之间切换。
3)典型用途:
- 排列按钮、标签等控件。
- 设计多屏幕的 UI 布局。
- 快速预览 UI 在不同分辨率下的效果。
2.7 Code
1)功能:
- 提供内置代码编辑器,用于编辑 QML 和 JavaScript 脚本。
2)特点:
- 提供语法高亮、代码补全和错误提示功能。
- 支持快速跳转到代码中的特定位置。
事实上 Qt Design Studio 代码管理器还比较辣鸡,代码存在问题时虽然会高亮,但是点击报错无法直接跳转,只能通过滑条自行寻找。
- 与 UI 设计实时同步,方便同时修改和查看效果。
3)典型用途:
- 添加逻辑代码(如按钮点击的具体行为)。
- 定义动态属性绑定。
- 调整动画或状态切换的实现。
2.8 Output
1)功能:
- 显示项目的运行、编译或调试的日志输出。
2)特点:
- 实时输出设计预览或项目构建的详细信息。
- 包括错误、警告和运行状态。
3)典型用途:
- 检查项目的编译或运行状态。
- 调试 UI 逻辑问题。
- 确认设计是否正确加载资源或配置。
2.9 Properties
1)功能:
- 显示和编辑选定 UI 元素的属性(如大小、位置、颜色等)。
2)特点:
- 动态显示当前选择元素的所有可配置属性。
- 属性分组显示(如外观、行为、绑定等)。
- 支持直接绑定数据或使用表达式。
3)典型用途:
- 调整按钮的位置和大小。
- 设置字体样式和颜色。
- 绑定属性以实现动态更新。
笔者建议初学者在 Properties 中查看属性属性,然后查找官方文档学习对应属性的功能,最后使用 Code 进行属性设置,这样使用起来更顺手。
2.10 Connections
1)功能:
- 管理 UI 元素之间的交互逻辑和信号/槽连接。
2)特点:
- 提供可视化的交互设计界面,支持拖放操作。
- 列出所有信号和槽,方便查看已定义的连接。
有 Qt 开发基础的可以直接使用 Code 进行槽函数的设计和实现,没有的也建议先去学一学Qt的信号与槽,此处设计十分反人类了。
3)典型用途:
- 设计按钮的点击事件行为。
- 连接滑块的值变化到显示标签。
- 创建动态交互功能。
3、运行 3D 项目
点击左上角的运行按钮,可以看到运行接入如上图所示,则说明入门成功啦!
后续我将会就我当前做的一个项目进行分享,包括但不限于模型挑选、代码编写、遇到的问题及其解决方法,欢迎关注我共同学习进步。