Flutter 的 3D 模型查看器

这是一个用于渲染交互式的 Flutter 小部件 glTF 和 GLB 格式的 3D 模型。

该小组件将 Google 的<模型查看器> Web 组件嵌入到 WebView 中。

• 飞镖 2.8+ 和颤振 1.17+

Android 和 iOS，具有最新的系统浏览器版本。

dependencies:
  model_viewer: ^0.8.1

要在 Android 9+ 设备上使用此微件，您的应用必须被允许将 与 的 HTTP 连接。Android 9（API 级别 28） 将 android：usesCleartextTraffic 的默认值从 更改为 ，因此您需要按如下方式配置应用：http://localhost:XXXXXtruefalseandroid/app/src/main/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"

这不会影响 Android 8 及更早版本。有关更多信息，请参阅 #7。

要在 iOS 上使用此小组件，您需要选择加入嵌入式视图预览 通过向应用文件添加布尔属性，使用 键和值：ios/Runner/Info.plistio.flutter.embedded_views_previewYES

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

• 渲染 glTF 和 GLB 模型。（还有 iOS 12+ 上的 USDZ 模型。

• 支持动画模型，具有可配置的自动播放设置。

• （可选）支持将模型启动到 AR 查看器中。

• （可选）自动旋转模型，并具有可配置的延迟。

• 支持小部件的可配置背景颜色。

import 'package:model_viewer/model_viewer.dart';

class MyApp extends StatelessWidget {
  @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",
          ar: true,
          autoRotate: true,
          cameraControls: true,
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
// ...
          src: 'assets/MyModel.glb',
// ...
}

class MyApp extends StatelessWidget {
// ...
          src: 'file:///path/to/MyModel.glb',
// ...
}

class MyApp extends StatelessWidget {
// ...
          src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
// ...
}

请注意，由于浏览器的 CORS 安全限制，模型文件必须与 HTTP 标头一起提供。Access-Control-Allow-Origin: *

您没有根据安装配置您的 本文档前面的说明。另见 #7。AndroidManifest.xml

一个：最有可能的是，您的设备或模拟器上的平台浏览器版本是 太旧，不支持模型查看器所需的功能。

例如，Android 10 模拟器上的库存 Chrome 版本太旧了 并会显示一个空白屏幕;它必须从 Play 商店升级 订购以使用此包。（Android 11 上的原生 Chrome 版本 但是，模拟器工作正常。请参阅 google/model-viewer#1109。

一个：模型 URL 无法加载的原因有多种，并且 呈现：

1. 由于 CORS 安全性，可能无法加载模型 URL 限制。托管模型文件的服务器必须发送适当的 CORS 响应标头，以便能够加载文件。 请参阅 google/model-viewer#1015。

2. 可能无法分析提供的 glTF 或 GLB 文件。 某些工具在导出 glTF 时可能会生成无效文件。总是 通过 glTF 验证器运行模型文件来检查这一点。

3. 平台浏览器可能不支持模型查看器 需要。请参阅 google/model-viewer#1109。