博维数孪CreateTwins—案例教程—案例实战(致敬 徕卡 M3)

致敬 徕卡 M3

案例展示

点击查看案例

功能列表：

• 进入项目后，相机绕场景旋转
• 通过开关组件控制旋转方向
• 通过按钮组件开启/停止旋转
• 通过按钮组件重置相机位置
• 通过滑条组件控制旋转速度

本章知识点：

• 使用场景入场触发条件

• 获取和设置相机旋转方向

• 获取和设置相机旋转速度

• 获取和设置相机位置

• 获取相机的旋转状态

• 停止和恢复相机旋转

• 文本与枚举的转换
• 获取和设置开关组件的值
• 获取滑条组件的值
• 设置滑条组件的值

说明：

• 本教程中的模型因为涉及到版权问题，暂不提供下载

开始我们的制作吧

准备素材

上传fbx文件，贴图，UI素材

相关链接：

导入/上传资源

画布设置

相关链接：

场景属性-画布设置

环境光设置

相关链接：

场景属性-环境设置

灯光设置 

相关链接：

灯光对象

灯光属性

背景色设置

 

相关链接：

案例教程-3D基础篇-添加背景-设置背景色

模型设置

相关链接：

3D通用属性

材质设置

"机身"材质，调整环境光遮蔽，漫反射，高光/金属，光泽度/粗糙度，法线属性

 

 

 

 

“地面_Shadow”材质，调整漫反射，高光/金属，光泽度/粗糙度，不透明度属性

相关链接：

材质资源属性

相机设置

创建一个空节点，命名为“初始 相机位”，用于之后复位相机位置

调整至合适的位置 

从3D对象列表中选中”相机“，设置位置

开启并设置好相机入场动画、旋转动画

相关链接：

属性面板-3D对象属性-相机属性-动画设置

最终效果：

制作UI

准备素材

将图片上传至资源池，并拖曳到画布中，点我下载

自定义2D节点

2D节点用于设置2D图片“按钮背景”、“探索新奇 见闻天地”

设置2D节点样式，将背景图设置为图片，点击“适应背景图”按钮，使图片恢复原始比例，背景颜色的透明度设为0

将边框颜色的透明度设为0

自定义按钮

按钮组件用于设置2D图片“开始旋转”、“停止旋转”、“复位”

设置按钮样式，将背景图设置为图片，点击“适应背景图”按钮，使图片恢复原始比例，背景颜色的透明度设为0

将边框颜色的透明度设为0

讲文本内容“按钮”设置为空

自定义单选开关组

开关组是组内状态互斥的多个按钮，一次只能选中一个

创建“旋转方向_开关组”，用于切换相机旋转的方向

• “旋转方向_开关组”内有2个按钮，点击“添加按钮”，增加按钮的数量，点击“X”按钮，删除按钮，并调整样式          

• “2D样式” - “背景颜色”-“不透明度”调整为“0”
• “2D样式”-“边框”-“边框颜色”不透明度调整为“0”
• “文本”-“内容”，将默认文字删除
• “2D样式”-“背景图片”，设置背景图
• 选中“向左”，设置“开关”-“值”为”开“状态

  

   

 自定义滑条

滑条组件用于旋转速度控制，将滑条组件命名为：“旋转速度_滑条”

设置滑块样式，将背景图设置为图片，点击“适应背景图”按钮，使图片恢复原始比例，背景色的透明度设为0

设置滑条样式，将滑条2D样式的背景颜色设为灰色，前景的背景颜色设为黄色

 

设置滑条参数（精度值越小，过渡越细腻）  

最终效果：

制作交互

蓝图事件

创建事件”相机初始化“，用于判断相机是否已经开启“相机旋转动画”

• 如果已开启，读取当前旋转速度，绑定至滑条
• 如果已开启，读取当前旋转方向，绑定至单选开关组（把获取到旋转方向的枚举值转为文本）
• 如果未开启，设置滑条值为19，设单选开关组的值为0，设置开始旋转按钮显示，停止旋转按钮隐藏

相关链接：

蓝图-变量-文本-枚举值转文本

蓝图-节点-流程控制

创建事件“旋转速度”，用于控制相机旋转速度

创建事件“旋转方向”，用于控制相机旋转方向

• 从开关组中获取的值为文本类型，设置相机的旋转方向接受的是枚举类型的参数，需要将文本转换为枚举类型

创建事件“开始旋转”，用于控制相机旋转的开启

• 设置“相机绕场景旋转”属性为开
• 隐藏“开放旋转_按钮”
• 显示“停止旋转_按钮”

创建事件“停止旋转”，用于控制相机旋转的停止

• 设置“相机绕场景旋转”属性为关
• 显示“开放旋转_按钮”
• 隐藏“停止旋转_按钮”

创建事件“复位”，用于控制相机回到初始设定位置

连接事件

将场景的”入场“事件，与蓝图事件“相机初始化”连接

将“旋转速度_滑条“的”改变“事件，与蓝图事件“旋转速度”连接

将“旋转方向_开关组”的"点击“事件，与蓝图事件“旋转方向”连接

将“开始旋转_按钮”的"点击“事件，与蓝图事件“开始旋转”连接

将“停止旋转_按钮”的"点击“事件，与蓝图事件“停止旋转”连接

将“复位_按钮”的"点击“事件，与蓝图事件“复位”连接

保存并预览您的项目吧