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上是不可用的。

相关推荐
苏元8 小时前
Flutter + GetX:Dio 多接口 401 拦截后跳登录,避免重复跳转和 Controller 找不到问题
flutter
Mhua_Z9 小时前
使用 flutter_tts 的配置项
flutter
你听得到1111 小时前
弹窗库1.1.0版本发布!不止于统一,更是全面的体验升级!
android·前端·flutter
RaidenLiu11 小时前
Riverpod 3 :掌握异步任务处理与 AsyncNotifier
前端·flutter
SCADA组态软件(2D,3D)13 小时前
又一款免费在线三维设计/家装设计/建筑设计/工业场景设计上线了
3d·ihomeware·家装设计·工业三维设计
新启航-光学3D测量14 小时前
逆向抄数工程师能力矩阵:设备操作(±0.05mm 精度)× 曲面重构 ×GD&T 公差分析
科技·3d·制造
无知的前端14 小时前
Flutter 模型转JSON跳过零值/null
flutter·json
DDC楼宇自控与IBMS集成系统解读15 小时前
BA 楼宇自控系统 + AI:重构楼宇设备管理的 “智能决策” 体系
大数据·网络·数据库·人工智能·3d·重构
jiushiapwojdap1 天前
Flutter上手记:为什么我的按钮能同时在iOS和Android上跳舞?[特殊字符][特殊字符]
android·其他·flutter·ios
木子雨廷1 天前
Flutter 局部刷新小组件汇总
前端·flutter