Flutter 的 3D 模型查看器

一个用于渲染GLB格式交互式3D模型的Flutter包，能够控制摄像机和动画。

特点

  • 播放和控制GLB格式3D模型的动画（播放、暂停、切换）
  • 获取3D模型可用的动画列表
  • 在可用动画之间切换
  • 控制摄像机位置
  • 控制摄像机轨道

待办事项（未来版本）

  • 修复通过setState更改模型源的问题
  • 从本地存储加载模型
  • 从网络加载模型
  • 支持glTF、Fbx、Obj、USDZ

示例

Model1 Model2 Model3 Model1 Model2 Model3

兼容性

  • Android
  • iOS
  • Web

注意事项

  • 目前此包仅支持GLB格式，其他3D格式即将推出。
  • 访问示例了解如何使用此包

安装

pubspec.yaml

dependencies:
  flutter_3d_controller: ^1.0.3

AndroidManifest.xml (仅限 Android 9+)

要在Android 9+设备上使用此小部件，您的应用必须被允许连接到https://:XXXXX。Android 9 (API级别28)将[android:usesCleartextTraffic]的默认值从true更改为false，因此您需要按如下方式配置应用的android/app/src/main/AndroidManifest.xml

     <application
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
-       android:label="example">
+       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 文件添加一个布尔属性，键为 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/flutter_3d_controller/assets/model-viewer.min.js" defer></script>
</head>

更多信息

此包使用“模型查看器”渲染3D模型，在渲染某些模型/纹理时可能存在一些问题，包的核心（模型查看器）将在未来进行更改以支持所有类型的3D模型

GitHub

查看 Github