Flutter 使用第三方包加载3d模型
1. O3D（第三方包）
这是一个用于以glTF和GLB格式呈现交互式3D模型的Flutter小部件。
这个小部件在WebView中嵌入了Google的<model-viewer> web组件。
在线演示：
O3D
BabakCode 3D UI
特性
- 渲染glTF和GLB模型；
- 支持动画模型，具有可配置的自动播放设置；
- 可选地支持将模型启动到AR查看器中；
- 可选地自动旋转模型，具有可配置的延迟；
- 支持小部件的可配置背景颜色。
2. 使用流程
2.1 添加依赖
在 pubspec.yaml 中添加如下
dependencies: o3d: ^3.1.0 |
2.2 修改配置
Android
在Android 9+设备上使用此小部件，Android 9（API级别28）将android:usesCleartextTraffic的默认值从true更改为false。
修改如下
# android/app/src/main/AndroidManifest.xml 修改内容
+ <uses-permission android:name="android.permission.INTERNET"/>
<application
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher"
android:label="example"
+ android:usesCleartextTraffic="true">
<activity
android:name=".MainActivity"
# app/build.gradle
defaultConfig {
...
minSdkVersion 21
...
}
|
这不会影响Android 8及更早版本。
IOS
要在iOS上使用这个小部件，你需要在应用的ios/Runner/Info.plist 文件中添加一个布尔属性。
<key>io.flutter.embedded_views_preview</key> <true/> |
Web
修改 web/index.html 的<head>标签来加载JavaScript，如下所示：
<head>
<!-- Other stuff -->
<script type="module" src="./assets/packages/o3d/assets/model-viewer.min.js" defer></script>
</head> |
2.3 代码示例
创建O3D小部件
class _MyHomePageState extends State<MyHomePage> {
// to control the animation
O3DController controller = O3DController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
actions: [
IconButton(
onPressed: () =>
controller.cameraOrbit(20, 20, 5),
icon: const Icon(Icons.change_circle)),
IconButton(
onPressed: () =>
controller.cameraTarget(1.2, 1, 4),
icon: const Icon(Icons.change_circle_outlined)),
],
),
body: O3D.asset(
src: 'assets/glb/jeff_johansen_idle.glb',
controller: controller,
),
);
}
} |
加载asset资源
O3D.asset( src: 'assets/MyModel.glb', // ... ), |
加载Web资源
body: O3D.network( src:'https://modelviewer.dev/shared-assets/models/Astronaut.glb', // ... ), |
注意：由于浏览器的CORS安全限制，模型文件必须带有Access-Control-Allow-Origin: * HTTP头。
加载文件系统资源
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return O3D(src: 'file:///path/to/MyModel.glb',
// ...
);
}
} |
注意：这在Web上是不可用的。