Flutter 使用第三方包加载3d模型

AiFlutter

于 2024-09-10 10:39:44 发布

阅读量2k

点赞数 31

文章标签： flutter 3d

本文链接：https://blog.csdn.net/nonagontech/article/details/142092429

版权

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