【Flutter】Unity 三端封装方案：Android / iOS / Web

关联文档：【方案分享】Flutter +Unity 跨平台三维渲染架构设计全解：插件封装、通信机制与热更新机制------ 支持 Android/iOS/Web 的 3D 内容嵌入与远程资源管理，助力 XR 项目落地

------ 支持 Android/iOS/Web 的 3D 内容嵌入与远程资源管理，助力 XR 项目企业级开发落地

适用场景：三维内容（模型/动画/场景）需要跨平台（Android/iOS/Web）展示，UI 用 Flutter 实现，Unity 作为底层 3D 渲染引擎，支持热更新、场景管理与统一接口通信。

---

Unity 三端封装方案：Android / iOS / Web

1. 多端封装的核心目标

在跨平台项目中，我们希望 Unity 作为渲染引擎统一三端（Android/iOS/Web）的三维内容展示，并通过 Flutter UI 层进行控制与交互。因此，Unity 的项目需要封装为三端可调用的渲染模块，以便被 Flutter 插件桥接。

目标：

• 将 Unity 工程分别封装为 Android AAR、iOS Framework、WebGL 构建目录
• 保持 Unity 项目代码逻辑一致性
• 封装统一通信接口供 Flutter 调用

---

2. Android 平台封装为 AAR

2.1 使用 Unity as a Library 模式

Unity 官方支持将项目打包为 AAR 库，供外部 App 集成。

配置方式：

• 打开 Unity → Build Settings → Android → Export Project
• 导出后在 Android Studio 中构建成 AAR
• 修改 launcher 和 unityLibrary 的 gradle 脚本

2.2 集成方式

Flutter 插件的 Android 层通过 UnityPlayerActivity 启动 Unity 页面，或通过自定义容器集成 UnityView：

val unityView = UnityPlayer(this)
frameLayout.addView(unityView.view)

2.3 通信封装

• Flutter ↔ Android 使用 MethodChannel
• Android ↔ Unity 使用 UnityPlayer.UnitySendMessage
• Unity ↔ Android 使用 AndroidJavaClass 回调

---

3. iOS 平台封装为 Framework

3.1 使用 Unity-iOS 构建导出

Unity 支持将项目构建为 iOS 工程。

• 打开 Unity → Build Settings → iOS → Build
• 使用 Xcode 打开并打包为 XCFramework（支持真机和模拟器）

xcodebuild -create-xcframework \
  -framework ios-arm64/UnityFramework.framework \
  -framework ios-x86_64-simulator/UnityFramework.framework \
  -output UnityRender.xcframework

3.2 集成方式

• 插件 iOS 层通过桥接调用 UnityFramework
• 自定义容器 UIViewController 加载 Unity

let unity = UnityEmbeddedSwift.shared
unity.showUnity()

3.3 通信封装

• Flutter ↔ iOS 使用 FlutterMethodChannel
• iOS ↔ Unity 使用 UnityFramework API
• Unity ↔ iOS 使用原生回调 + NotificationCenter

---

4. Web 平台封装为 WebGL 模块

4.1 Unity WebGL 构建

• Unity → Build Settings → WebGL → Build
• 配置 index.html 与 Build/UnityLoader.js

推荐构建配置优化：

• 开启压缩
• 开启 wasm streaming
• 设置合适的分辨率、内存上限

4.2 集成方式

• Flutter Web 页面中嵌入 iframe 加载 WebGL 页面
• 使用 JS Bridge 通信（如 postMessage）

<iframe id="unityFrame" src="unity/index.html"></iframe>

4.3 通信封装

• Flutter ↔ iframe 使用 window.postMessage
• iframe ↔ Unity 使用 UnityLoader.SendMessage 或 jslib
• Unity ↔ iframe 通过 JS plugin 回调父窗口

---

5. 封装总结对比表

平台	渲染模块	插件封装形式	通信机制
Android	AAR (UnityLibrary)	Flutter 插件 Android 目录	MethodChannel + UnitySendMessage
iOS	XCFramework	Flutter 插件 iOS 目录	MethodChannel + UnityFramework API
Web	WebGL 构建输出目录	Flutter Web iframe 嵌入	postMessage + JS Bridge

---

6. 开发建议

• 建议使用统一的命名空间管理 Flutter 与 Unity 的通信协议
• 在三端封装中都保留 initUnity、sendMessage、disposeUnity 等基础接口
• 使用配置文件或参数传入方式控制加载场景和渲染内容，提升灵活性

---