Unity 3D模型展示之UI布局

整体布局情况

导入UI资源并统一将Texture Type设置为Sprite(2D and UI)

1.标题

将Text中的文本设置为’Unity 3D物体展示实例’。
添加Shadow与Outline分别按照下图进行设置属性。

2.操作步骤

设置背景图片content，将背景色改为白色
设置LeftPanel增加Vertical Layout Group与Content Size Fitter脚本，分别按照下图进行属性设置。

Content Size Fitter组件主要是用来设置UI的长宽，Horizontal Fit和Vertical Fit分别是控制UI的宽和高，有三个值可选：
Unconstrained：组件不根据布局元素调整，可手动修改长宽的值。
MinSize：根据布局元素的最小值来调整，不能手动修改长宽的值。
PreferredSize：根据布局元素的内容来调整，不能手动修改长宽的值。
这里选择MinSize。这个区域以后要动态改变内容的所以需要Vertical Layout Group与Content Size Fitter脚本进行控制动态的数据布局。
LeftPanel子元素添加Image、Panel，分别命名为TitleImage、TaskPanel。
- TitleImage 设置背景图片、设置Width,Height。
- TaskPanel将背景图片去掉，添加Vertical Layout Group脚本，并进行如下属性设置，。
- 在TaskPanel中添加Image，在Image添加Text并设置为预制体。同时需要修改Content的Vertical Layout Group的Child Force Expand选为Use Child Scale。
  修改前Child Force Expand
  
  修改后Use Child Scale

3.左下角功能导航

设置LeftBottomPanel，并在其下添加以下UI元素。

为LeftBottomPanel取消背景色。添加Horizontal Layout Group脚本，设置如下属性。

工程目录：
LeftBottomPanel增加Horizontal Layout Group脚本进行布局控制。进行如下属性控制。
添加Button、Image 标签。
- Button 替换图片，并将Text替换为Image并设置Image的图片为colse的图片资源。将Button重命名为BtnClose
- Image标签下增加Toggle(标注功能)，增加一个重置按钮。
- 重命名

4.右下角主导航

5.配件区

在RightCenterPanel中添加Image、Panel并重命名。

将Image重命名为TitleImage，并设置背景图片为content，添加Text标签文字内容为配件区。
Panel重命名为Content，并设置一些属性。
在Content添加Image并设置背景图片。将其设置为预制体并命名为RightItem。

6.最终效果

下篇文章介绍操作步骤动态显示。

Unity 3D模型展示之UI布局相关推荐

Unity 3D模型展示之webGL平台展现
在之前的项目基础上我们已经打包后在PC端进行展示了.这篇文章主要介绍在切换到webGL上时效果展示不出来需要进行调整,特此记录一下. 1.平台切换选择WebGL平台切换,没有的可以进行安装,安装之后 ...
Unity 3D模型展示框架篇之项目整理
本项目将整合之前Unity程序基础小框架专栏在Unity 3D模型展示项目基础上进行整合,并记录了集成过程中对原脚本的调整过程.增加了Asset Bundle+ILRuntime热更新技术流程. 1. ...
Unity 3D模型展示框架篇之框架运用
本项目将整合之前Unity程序基础小框架专栏在Unity 3D模型展示项目基础上进行整合,并记录了集成过程中对原脚本的调整过程.增加了Asset Bundle+ILRuntime热更新技术流程. 效果 ...
Unity 3D模型展示框架篇之自由观察(Cinemachine)
本项目将整合之前Unity程序基础小框架专栏在Unity 3D模型展示项目基础上进行整合,并记录了集成过程中对原脚本的调整过程.增加了Asset Bundle+ILRuntime热更新技术流程. 在U ...
Unity 3D模型展示框架篇之ILRuntime快速入门
系列文章目录 Unity 3D模型展示框架篇之项目整理 Unity 3D模型展示框架篇之框架运用 Unity 3D模型展示框架篇之自由观察(Cinemachine) Unity 3D模型展示框架篇之资 ...
unity 3D模型展示旋转缩放
目标: 在UI层上自由观察3D 模型,实现鼠标控制模型的旋转,缩放&& 触摸屏手势控制模型的旋转缩放控制: 这里仅将控制代码挂载到相机上,通过对相机的控制来观察模型. 基本上为最小单 ...
Unity 3D模型展示之自由观察模型
效果展示进行调整将灯光放到Main Camera下,旋转的时候光就一直打在这面. 1.观察模型脚本 public class Smooth3DCamera : MonoBehaviour {publ ...
Unity 3D模型展示之模型透明效果
效果展示 1.透明效果实现思路简单点就是将模型的材质替换成透明材质.需要注意:1.指定范围内的模型进行透明化.2.一个模型会有多个材质,都需要进行透明化.3.还能将模型的材质恢复最初的效果.4.选中 ...
Unity 3D模型展示之生成标注
1.效果图 2.生成标注标注生成要求: 1.指定元件生成标注. 2.生成标注出现位置可以设置. 根据标注生成的要求,可以在元件添加脚本时将这些信息读取并进行实现.控制标注生成在元件的位置,生成标注的 ...

Unity 3D模型展示之UI布局

整体布局情况

1.标题

2.操作步骤

3.左下角功能导航

4.右下角主导航

5.配件区

6.最终效果

Unity 3D模型展示之UI布局相关推荐

最新文章

热门文章