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

发布于 1周前 作者 zlyuanteng 来自 Flutter

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

概述

这是一个基于 omchiii 的 model_viewer_plus.dart 插件的分支版本，适配了 FlutterFlow。该插件用于在 Flutter 应用中渲染交互式的 3D 模型，支持 glTF 和 GLB 格式。

截图

截图1 截图2

兼容性

  • Android
  • iOS（AR 视图可能不适用于 iOS 16+）
  • Web，需要较新的系统浏览器版本。

注意事项

在 Android 上，我们使用 Google 应用 (com.google.android.googlequicksearchbox) 来显示交互式 3D 模型。默认情况下，场景查看器以 AR 原生模式启动。如果未安装 Google Play 服务 AR (ARCore, com.google.ar.core)，场景查看器将优雅地回退到 3D 模式。

安装

pubspec.yaml
dependencies:
  model_viewer_plus: ^1.6.0
AndroidManifest.xml (仅限 Android 9+)

为了在 Android 9+ 设备上使用此组件，您的应用必须被允许进行 HTTP 连接。由于 Android 9 (API level 28) 将 <application> 的 android:usesCleartextTraffic 默认值从 true 改为 false，您需要在 android/app/src/main/AndroidManifest.xml 中进行以下配置：

<application
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher"
    android:label="example"
    android:usesCleartextTraffic="true">
    <activity
        android:name=".MainActivity"

这不会影响 Android 8 及更早版本。更多信息参见 #7。

app/build.gradle (仅限 Android)

将 minSdkVersion 改为 21：

defaultConfig {
    ...
    minSdkVersion 21
    ...
}
Info.plist (仅限 iOS)

要使此组件在 iOS 上运行，您需要启用嵌入视图预览，并在 ios/Runner/Info.plist 文件中添加以下键值对：

<key>io.flutter.embedded_views_preview</key>
<true/>
web/index.html (仅限 Web)

修改 web/index.html 的 <head> 部分以加载 JavaScript：

<head>

  <!-- 其他内容 -->

  <script type="module" src="./assets/packages/model_viewer_plus/assets/model-viewer.min.js" defer></script>
</head>

./assets/packages/model_viewer_plus/assets/model-viewer.min.js 使用的是包中包含的默认 JS 文件。您可以使用 https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js 获取最新版本的 <model-viewer>。但请注意，我们的 model-viewer-plus 可能无法保持与 <model-viewer> 最新版本同步。

根据 #44，某些移动设备上的渲染质量可能较低。请考虑在 <head> 中添加 <meta name="viewport" content="width=device-width, initial-scale=1" />。

功能

  • 渲染 glTF 和 GLB 模型。（iOS 12+ 还支持 USDZ 模型）
  • 支持带有可配置自动播放设置的动画模型。
  • 可选地支持启动到 AR 查看器。
  • 可选地自动旋转模型，带有一个可配置的延迟。
  • 支持可配置的背景颜色。

示例

导入库
import 'package:model_viewer_plus/model_viewer_plus.dart';
创建一个 ModelViewer 组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Model Viewer')),
        body: const ModelViewer(
          backgroundColor: Color.fromARGB(0xFF, 0xEE, 0xEE, 0xEE),
          src: 'assets/Astronaut.glb',
          alt: 'A 3D model of an astronaut',
          ar: true,
          arModes: ['scene-viewer', 'webxr', 'quick-look'],
          autoRotate: true,
          iosSrc: 'https://modelviewer.dev/shared-assets/models/Astronaut.usdz',
          disableZoom: true,
        ),
      ),
    );
  }
}

更多关于Flutter 3D模型展示插件model_viewer_plus_ff的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter 3D模型展示插件model_viewer_plus_ff的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用model_viewer_plus_ff插件来展示3D模型的代码案例。model_viewer_plus_ff是一个Flutter插件，它允许你在Flutter应用中嵌入并展示3D模型。

首先，确保你的Flutter项目已经创建并初始化。然后，按照以下步骤进行：

1. 添加依赖

在你的pubspec.yaml文件中添加model_viewer_plus_ff依赖：

dependencies:
  flutter:
    sdk: flutter
  model_viewer_plus_ff: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入插件：

import 'package:flutter/material.dart';
import 'package:model_viewer_plus_ff/model_viewer_plus_ff.dart';

3. 使用ModelViewerPlusFF组件

在你的Flutter应用中，使用ModelViewerPlusFF组件来展示3D模型。以下是一个完整的示例代码：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('3D Model Viewer Demo'),
        ),
        body: Center(
          child: ModelViewerPlusFF(
            src: 'path/to/your/model.glb',  // 替换为你的3D模型文件的路径或URL
            width: 600,
            height: 600,
            autoRotate: true,  // 自动旋转模型
            cameraControls: true,  // 允许相机控制
            backgroundColor: Colors.grey[200]!,  // 背景颜色
          ),
        ),
      ),
    );
  }
}

4. 放置3D模型文件

确保你的3D模型文件（例如.glb或.gltf格式）已经放置在正确的位置。如果你使用的是本地文件，可以将模型文件放在assets文件夹中，并在pubspec.yaml中声明：

flutter:
  assets:
    - assets/models/your_model.glb  # 替换为你的模型文件路径

然后，在代码中引用时，使用assets路径：

ModelViewerPlusFF(
  src: 'assets/models/your_model.glb',  // 使用assets路径
  // 其他参数...
)

5. 运行应用

现在你可以运行你的Flutter应用，应该会看到一个3D模型展示在页面上，并且可以通过触摸屏幕来控制模型的旋转和缩放（如果启用了相机控制）。

注意事项

  • 确保你的3D模型文件格式是支持的格式（如.glb或.gltf）。
  • 如果你的模型文件较大，可能需要一些时间来加载。
  • 插件的具体功能和参数可能会随着版本更新而变化，请参考最新的官方文档。

这个示例展示了如何使用model_viewer_plus_ff插件在Flutter应用中展示3D模型。如果你有更具体的需求或遇到问题，可以查阅插件的官方文档或在其GitHub仓库中查找相关信息。

回到顶部