如何在Flutter中使用GLB格式3D模型？已尝试依赖无效

一、先排查模型本身问题 #

• 验证GLB文件有效性：用Blender、系统自带3D Viewer（Windows）打开模型，确认模型无损坏、材质纹理加载正常。若模型本身有问题，任何依赖包都无法正常渲染。
• 简化模型：如果模型面数过高、纹理体积过大，可能导致Flutter端加载失败，导出时可尝试降低面数、压缩纹理。

二、修复model_viewer_plus的使用问题 #

这个包基于WebView封装，是较稳定的方案，需确保配置正确：

1. 依赖配置：在pubspec.yaml中确认依赖：

dependencies:
  model_viewer_plus: ^1.5.0

2. 平台配置：
   • Android：在android/app/src/main/AndroidManifest.xml添加网络权限，且minSdkVersion不低于21：

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

   • iOS：在ios/Runner/Info.plist添加WebView预览权限：

     <key>io.flutter.embedded_views_preview</key>
     <string>YES</string>
     

3. 加载本地模型：
   将GLB文件放入assets/models/目录，在pubspec.yaml声明资源：

   assets:
     - assets/models/your_model.glb
   

   代码中加载示例：

   import 'package:model_viewer_plus/model_viewer_plus.dart';
   
   Widget build(BuildContext context) {
     return ModelViewer(
       src: 'assets/models/your_model.glb',
       alt: '自定义3D模型',
       ar: false,
       autoRotate: true,
       cameraControls: true,
     );
   }
   

三、使用flutter_gl + three_dart（纯原生渲染，无WebView） #

若不想依赖WebView，可采用纯Flutter原生渲染方案：

1. 添加依赖：

dependencies:
  flutter_gl: ^0.0.6
  three_dart: ^0.9.0

2. 基础加载代码示例：

import 'package:flutter/material.dart';
import 'package:flutter_gl/flutter_gl.dart';
import 'package:three_dart/three_dart.dart' as three;

class GLBViewer extends StatefulWidget {
  @override
  _GLBViewerState createState() => _GLBViewerState();
}

class _GLBViewerState extends State<GLBViewer> {
  late FlutterGlPlugin flutterGlPlugin;
  three.WebGLRenderer? renderer;
  three.Scene? scene;
  three.PerspectiveCamera? camera;
  three.GLTFLoader? loader;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => initScene());
  }

  void initScene() async {
    flutterGlPlugin = FlutterGlPlugin();
    await flutterGlPlugin.initialize();

    final size = MediaQuery.of(context).size;
    renderer = three.WebGLRenderer({
      'canvas': flutterGlPlugin.glContext,
      'width': size.width.toInt(),
      'height': size.height.toInt(),
      'antialias': true,
    });
    renderer!.setClearColor(three.Color(0xffffff));

    scene = three.Scene();
    camera = three.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
    camera!.position.z = 5;

    loader = three.GLTFLoader();
    loader!.load('assets/models/your_model.glb', (gltf) {
      scene!.add(gltf.scene);
      setState(() {});
    });

    animate();
  }

  void animate() {
    renderer?.render(scene!, camera!);
    flutterGlPlugin.updateTexture();
    Future.delayed(const Duration(milliseconds: 16), animate);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlutterGl(
        plugin: flutterGlPlugin,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        onGlCreated: (_) {},
      ),
    );
  }
}

四、常见问题排查 #

• model_viewer_plus白屏：检查网络权限（Android）、WebView是否正常，可尝试加载在线GLB链接测试是否为本地资源路径问题。
• 原生渲染包崩溃：检查Flutter版本与依赖包的兼容性，确认模型是否包含不支持的材质（如部分PBR材质需特殊处理）。

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