unity ui解决方案新玩法-Blazor 3.点击UI中的相机方向按钮或者场景模型列表，要能控制相机移动

上一篇链接
这篇随笔是当前系列第三篇，详细说明点击UI中的相机方向按钮或者场景模型列表，要能控制相机移动的实现步骤。

1. 需求流程图

2. 具体实现步骤

2.1. 实现第一步：场景访问UI界面

• 详细实现查看上一篇链接

2.2. 实现第二步：UI界面获取对应数据

• 定义相机方向按钮数据和场景内模型数据
  
• 创建相机方向按钮组件，并在Index组件中应用，
  
• 创建模型列表按钮组件，并在Index组件中应用，
  

2.3. 实现第三步：返回页面

• 启动客户端，访问页面
  

2.4. 实现第四步：用户点击相机方向按钮，对应按钮组件样式变化，触发事件

• 完善相机方向按钮组件相关代码
  

2.5. 实现第五步：将相机移动事件发送给场景

• 创建CameraHub并完善相关方法，相机按钮状态切换时发送事件
  

2.6. 实现第六步：场景相机进行移动

• 将页面的body调至透明，以露出被遮挡的场景
  
• 创建相机相关的HubService并完善连接代码，接收服务端消息并将状态同步到相机脚本中，相机脚本根据布尔量判断方向
  
• 运行客户端，测试相机方向按钮的功能
  运行视频

2.7. 实现第七步：将模型数据推送给场景

• 新建一个场景数据相关的Hub,然后利用定时器向所有连接发送场景数据
  
• 客户端新建一个HubService，根据收到的信息生成对应模型
  

2.8. 实现第八步：点击模型按钮，按钮样式变化，触发事件

• 完善模型按钮逻辑
  

2.9. 实现第九步：将点击模型按钮事件发送给场景

• 定义一个新方法，在触发按钮状态改变时调用，将模型名称传给场景
  

2.10. 实现第十步：场景相机定位到模型附近

• HubService中添加对应的事件处理配置，实现相机根据模型位置移动自身位置的方法
  
• 运行客户端，测试场景模型按钮对应功能
  运行视频

3. 结尾的话

通宵写到最后急着写完这篇去睡觉，代码有坏味道了，接下来几篇里找个机会重构一下。还有就是发现嵌入视频时好时坏，干脆直接做成链接了。
下一篇链接