Flutter 的 3D 模型查看器
https://pub.dev/packages/model_viewer – Fork 自一个已停止维护的包，并为其添加了 Web 支持。
这是一个用于在 glTF 和 GLB 格式中渲染交互式 3D 模型的 Flutter 小部件。
该小部件将 Google 的 <model-viewer> Web 组件嵌入到 WebView 中。
截图
兼容性
Android、iOS、Web，需要 最近的系统浏览器版本。
注意事项
我们在 Android 上使用 Google 应用 com.google.android.googlequicksearchbox 来显示交互式 3D 模型。模型默认以“ar_preferred”模式显示，场景查看器以 AR 原生模式作为入口模式启动。如果不存在 Google Play 服务的 AR（ARCore，com.google.ar.core），场景查看器会优雅地回退到 3D 模式作为入口模式。
安装
pubspec.yaml
dependencies:
model_viewer_plus: ^(newest from https://pub.dev/packages/model_viewer_plus)
AndroidManifest.xml (仅限 Android 9+)
要在 Android 9+ 设备上使用此小部件，您的应用必须允许与 https://:XXXXX 进行 HTTP 连接。Android 9 (API level 28) 将 android:usesCleartextTraffic 的默认值从 true 更改为 false，因此您需要将应用的 android/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。
app/build.gradle (仅限 Android)
将 minSdkVersion 设置为 19。
defaultConfig {
// TODO: Specify your own unique Application 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 的 <head> 标签以加载 JavaScript，如下所示：
<head>
<!-- Other stuff -->
<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，您正在使用最新版本的 <model-viewier>。您可以将 src 属性的值替换为另一个 CDN 镜像的 URL。但请注意，我们的 model-viewer-plus 可能无法跟上 <model-viewier> 的最新版本。
功能
-
渲染 glTF 和 GLB 模型。（同样，USDZ 模型在 iOS 12+ 上也支持。）
-
支持动画模型，并具有可配置的自动播放设置。
-
可选支持将模型启动到 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 标头进行托管。
常见问题解答
问：为什么我收到 net::ERR_CLEARTEXT_NOT_PERMITTED 错误？
您没有按照本文档前面安装说明中的要求配置您的 AndroidManifest.xml。另请参阅 #7。
问：为什么示例应用只显示一个空白屏幕？
答： 最有可能的原因是您设备或模拟器上的平台浏览器版本太旧，不支持 Model Viewer 所需的功能。
例如，Android 10 模拟器上的 stock Chrome 版本太旧，会显示一个空白屏幕；需要从 Play 商店更新才能使用此包。（Android 11 模拟器上的 stock Chrome 版本可以正常工作。）有关更多信息，请参阅 google/model-viewer#1109。
问：为什么我的 3D 模型无法加载和/或渲染？
答： 您的模型 URL 可能因多种原因而无法加载和渲染
-
由于 CORS 安全限制，可能无法加载模型 URL。托管模型文件的服务器必须发送适当的 CORS 响应标头，Model Viewer 才能加载文件。请参阅 google/model-viewer#1015。
-
可能无法解析提供的 glTF 或 GLB 文件。一些工具在导出 glTF 时可能会生成无效文件。请始终使用 glTF Validator 运行您的模型文件以检查此问题。
-
平台浏览器可能不支持 Model Viewer 所需的功能。请参阅 google/model-viewer#1109。
