Flutter 3D 模型查看器
https://pub.dev/packages/model_viewer – Fork 自一个已停止维护的包，并为其添加了 Web 支持。
这是一个用于渲染 glTF 和 GLB 格式的交互式 3D 模型的 Flutter 小部件。
该小部件将 Google 的 Web 组件嵌入到 WebView 中。
兼容性
-
Android
-
iOS (AR 视图在 iOS 16+ 上可能不可用)
-
Web，使用较新的系统浏览器版本。
注意事项
我们使用 Google APP (com.google.android.googlequicksearchbox) 在 Android 上显示交互式 3D 模型。该模型默认以“ar_preferred”模式显示，场景查看器以 AR 原生模式作为入口模式启动。如果不存在 Google Play Services for AR (ARCore, com.google.ar.core)，场景查看器将优雅地回退到 3D 模式作为入口模式。
安装
pubspec.yaml
依赖项: model_viewer_plus: ^(最新版本来自 https://pub.dev/packages/model_viewer_plus)
AndroidManifest.xml (仅限 Android 9+)
要在 Android 9+ 设备上使用此小部件，您的应用程序必须允许向 https://:XXXXX 发起 HTTP 连接。Android 9 (API 级别 28) 将 android:usesCleartextTraffic 的默认值从 true 更改为 false，因此您需要按如下方式配置应用程序的 android/app/src/main/AndroidManifest.xml
<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。
app/build.gradle (仅限 Android)
将 minSdkVersion 更改为 19。
defaultConfig { // TODO: 指定您自己的唯一应用程序 ID (https://developer.android.com.cn/studio/build/application-id.html)。applicationId "com.example.lab_rat" minSdkVersion 19 targetSdkVersion flutter.targetSdkVersion versionCode flutterVersionCode.toInteger() versionName flutterVersionName }
Info.plist (仅限 iOS)
要在 iOS 上使用此小部件，您需要通过在应用程序的 ios/Runner/Info.plist 文件中添加一个布尔属性来实现嵌入式视图预览，键为 io.flutter.embedded_views_preview，值为 YES
<key>io.flutter.embedded_views_preview</key> <true/>
web/index.html (仅限 Web)
修改您的 web/index.html 的 <script> 标签以加载 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 文件。官方网站使用 unpkg，通过使用 https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js，您正在使用 . 的最新版本。您可以将 src 属性的值替换为另一个 CDN 镜像的 URL。但请注意，我们的 model-viewer-plus 可能无法跟上 的最新版本。
根据 #44，在某些移动设备上的渲染质量可能较低。请考虑将添加到您的 web/index.html 的 <head> 中。
功能
-
渲染 glTF 和 GLB 模型。（在 iOS 12+ 上也支持 USDZ 模型。）
-
支持动画模型，并具有可配置的自动播放设置。
-
可选支持将模型启动到 AR 视图。
-
可选自动旋转模型，并具有可配置的延迟。
-
支持小部件的可配置背景颜色。
示例
导入库
import 'package:model_viewer_plus/model_viewer_plus.dart';
创建 ModelViewer 小部件
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, ), ), ); } }
加载捆绑的 Flutter 资源
class MyApp extends StatelessWidget { // ... src: 'assets/MyModel.glb', // ... }
从文件系统加载模型
这在 Web 上不可用。
class MyApp extends StatelessWidget { // ... src: 'file:///path/to/MyModel.glb', // ... }
从 Web 加载模型
class MyApp extends StatelessWidget { // ... src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb', // ... }
请注意，由于浏览器的 CORS 安全限制，模型文件必须使用 Access-Control-Allow-Origin: * HTTP 标头进行提供。
