Flutter 3D模型展示插件model_viewer的使用

简介

这是一个用于在Flutter应用程序中渲染交互式3D模型的插件。它支持glTF和GLB格式的模型文件，并通过嵌入Google的<model-viewer> Web组件来实现。

项目信息

• 许可证: 公共领域 (Unlicense)
• Dart版本: 2.8+
• Flutter版本: 1.17+
• 平台: Android 和 iOS

前置条件

• Dart: 2.8+
• Flutter: 1.17+

兼容性

• Android: 需要近期系统浏览器版本。
• iOS: 需要近期系统浏览器版本。

安装

pubspec.yaml

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  model_viewer: ^0.8.1

AndroidManifest.xml (仅限Android 9+)

在Android 9及以上设备上使用此插件时，需要配置AndroidManifest.xml以允许明文流量：

--- a/example/android/app/src/main/AndroidManifest.xml
+++ b/example/android/app/src/main/AndroidManifest.xml
@@ -8,7 +8,8 @@
     <application
         android:name="io.flutter.app.FlutterApplication"
         android:label="model_viewer_example"
-        android:icon="@mipmap/ic_launcher">
+        android:icon="@mipmap/ic_launcher"
+        android:usesCleartextTraffic="true">
         <activity
             android:name=".MainActivity"
             android:launchMode="singleTop"

Info.plist (仅限iOS)

在iOS上使用此插件时，需要启用嵌入视图预览功能：

<key>io.flutter.embedded_views_preview</key>
<true/>

特性

• 支持glTF和GLB格式的模型文件。
• 支持动画模型，可配置自动播放。
• 可选地支持将模型加载到增强现实（AR）查看器中。
• 可配置模型的背景颜色。
• 可配置模型是否自动旋转。

示例代码

导入库

import 'package:model_viewer/model_viewer.dart';

创建ModelViewer小部件

以下是一个简单的示例，展示如何在Flutter应用程序中使用ModelViewer小部件：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Model Viewer")),
        body: ModelViewer(
          // 背景颜色
          backgroundColor: Color.fromARGB(0xFF, 0xEE, 0xEE, 0xEE),
          // 模型路径（本地资源）
          src: 'etc/assets/Astronaut.glb',
          // 替代文本
          alt: "A 3D model of an astronaut",
          // 启用AR模式
          ar: true,
          // 自动旋转
          autoRotate: true,
          // 启用相机控制
          cameraControls: true,
        ),
      ),
    );
  }
}

加载捆绑的Flutter资源

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Model Viewer")),
        body: ModelViewer(
          src: 'assets/MyModel.glb',
          alt: "A 3D model of an object",
        ),
      ),
    );
  }
}

从文件系统加载模型

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Model Viewer")),
        body: ModelViewer(
          src: 'file:///path/to/MyModel.glb',
          alt: "A 3D model of an object",
        ),
      ),
    );
  }
}

从网络加载模型

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Model Viewer")),
        body: ModelViewer(
          src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
          alt: "A 3D model of an astronaut",
        ),
      ),
    );
  }
}