Flutter如何加载3D模型

在Flutter中如何加载和显示3D模型？有没有推荐的插件或库可以实现这个功能？具体步骤是什么？另外，支持哪些格式的3D模型文件？性能方面需要注意什么？

ionicwang 1楼

Flutter加载3D模型可使用第三方库，如model_viewer或three_dart。通过导入库，加载GLB或GLTF格式文件，在Widget中渲染显示。需注意文件路径和依赖配置。

更多关于Flutter如何加载3D模型的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 2楼

在Flutter中加载3D模型主要通过Model Viewer和Three.dart两种主流方案实现。以下是具体方法：

1. 使用 `model_viewer` 包（推荐Web/移动端）

适用于glTF/GLB格式模型，基于Google的<model-viewer>组件。

步骤：

添加依赖

dependencies:
  model_viewer: ^1.0.0

基础使用

import 'package:model_viewer/model_viewer.dart';

class My3DModel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ModelViewer(
        src: 'assets/models/robot.glb', // 模型路径
        alt: "3D模型",
        ar: true,                      // 开启AR（仅移动端）
        autoRotate: true,              // 自动旋转
        cameraControls: true,          // 允许鼠标/手势控制
      ),
    );
  }
}

在pubspec.yaml中声明资源

flutter:
  assets:
    - assets/models/

2. 使用 `three.dart`（复杂交互需求）

基于Three.js的Dart移植版，支持更复杂的3D场景。

步骤：

添加依赖

dependencies:
  three: ^0.0.1

加载模型示例

import 'package:three/three.dart' as three;

void loadModel() async {
  // 初始化场景
  final scene = three.Scene();
  final camera = three.PerspectiveCamera(75, 1, 0.1, 1000);
  final renderer = three.WebGLRenderer();

  // 加载GLTF模型
  final loader = three.GLTFLoader();
  final gltf = await loader.loadAsync('assets/model.glb');
  scene.add(gltf.scene);

  // 渲染循环
  void animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
  animate();
}

注意事项：

模型格式：优先使用glTF/GLB格式（体积小、加载快）
性能优化：
- 移动端建议压缩纹理
- 复杂模型使用LOD（多细节层次）
平台限制：
- model_viewer在iOS/Android需WebView支持
- three.dart需启用CanvasKit（--web-renderer canvaskit）

Flutter如何加载3D模型

1. 使用 model_viewer 包（推荐Web/移动端）

2. 使用 three.dart（复杂交互需求）

注意事项：

推荐方案选择：

1. 使用 `model_viewer` 包（推荐Web/移动端）

2. 使用 `three.dart`（复杂交互需求）