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

相关推荐
玫瑰花开一片一片2 小时前
Flutter IOS 真机 Widget 错误。Widget 安装后系统中没有
flutter·ios·widget·ios widget
hepherd3 小时前
Flutter 环境搭建 (Android)
android·flutter·visual studio code
陈小峰_iefreer5 小时前
stone 3d v3.3.0版本发布,含时间线和连接器等新功能
3d·webgl·metaverse·cadcg
bst@微胖子20 小时前
Flutter之路由和导航
flutter
亚洲小炫风21 小时前
flutter 中各种日志
前端·flutter·日志·log
子燕若水1 天前
“Daz to Unreal”将 G8 角色(包括表情)从 daz3d 导入到 UE5。在 UE5 中,我发现使用某个表情并与闭眼混合后,上眼睑出现了问题
3d·ue5
louisgeek1 天前
Flutter 动画之 Implicit 隐式动画
flutter
勤劳打代码1 天前
游刃有余 —— Isolate 轻量化实战
flutter·github·dart
zhu_zhu_xia1 天前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl