Flutter model_viewer_plus组件无法显示3D模型求排查

问题分析 #

从你提供的代码和日志来看，核心问题是使用了系统绝对路径作为模型源，Flutter的WebView环境无法直接访问本地系统路径，导致模型无法加载。此外，本地资源的路径配置也需要符合Flutter的Asset规则。

修复步骤 #

1. 改用正确的Asset路径

删除代码中的系统绝对路径，替换为pubspec.yaml中配置的Asset路径。假设你的Duck.glb放在项目根目录的public/models/下，修改ModelViewer的src参数：

ModelViewer(
  backgroundColor: Colors.teal,
  src: "public/models/Duck.glb", // 使用Asset路径
  alt: "A 3D model of a duck",
  ar: true,
  autoRotate: true,
  cameraControls: true,
),

注意路径大小写敏感，确保文件名和目录名与实际一致。

2. 验证Asset配置与文件位置

• 确认Duck.glb确实存在于public/models/目录下
• 检查pubspec.yaml中的assets配置已经包含- public/models/（你的配置已正确，无需修改）

3. 用在线模型验证组件可用性

先排除本地资源问题，使用官方示例模型测试组件是否正常工作：

src: "https://modelviewer.dev/shared-assets/models/Astronaut.glb",

如果该模型能正常显示，说明组件本身无问题，问题仅出在本地资源配置上。

4. 平台权限与配置检查

• Android：在android/app/src/main/AndroidManifest.xml中添加必要权限：

  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  

• iOS：若加载HTTP协议的在线模型，需在ios/Runner/Info.plist中添加：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

5. 清理并重建项目

执行以下命令清除缓存并重新构建，确保Asset资源被正确打包：

flutter clean
flutter pub get
flutter run

补充说明 #

从生成的HTML日志可以看到，之前的src是系统绝对路径，WebView无法访问这类路径。修改为Asset路径后，model_viewer_plus会自动将其转换为WebView可识别的资源URL，从而正常加载模型。

内容的提问来源于stack exchange，提问作者levi