Flutter中如何加载和使用3D模型

在Flutter项目中想要加载和展示3D模型，有哪些推荐的实现方案？目前看到有flutter_3d_obj和arcore_flutter_plugin等插件，但不太清楚具体如何使用，以及不同插件之间的优缺点对比。希望能了解：

支持哪些常见的3D模型格式（如.obj, .gltf等）？
如何将模型文件集成到项目中并正确加载？
是否支持模型交互（旋转、缩放等操作）？
在性能方面有哪些需要注意的地方？

在Flutter中加载3D模型，可以使用model_viewer插件。

添加依赖到pubspec.yaml。
导入包并使用ModelViewer组件。
支持glTF和GLB格式，可从本地或网络加载。
示例代码：

ModelViewer(
  src: 'assets/model.glb',
  ar: true,
  autoRotate: true,
)

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

ionicwang 2楼

在Flutter中加载和使用3D模型主要通过Model Viewer库或Three.dart实现，以下是具体方法：

1. 使用 `model_viewer` 库（推荐Web和移动端简单模型）

步骤：

添加依赖：
```
dependencies:
  model_viewer: ^1.0.0
```

加载3D模型（支持.glb/.gltf格式）：

import 'package:model_viewer/model_viewer.dart';

class My3DModel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ModelViewer(
        src: 'assets/model.glb', // 模型路径
        alt: "3D模型",
        ar: true,               // 启用AR（仅iOS）
        autoRotate: true,       // 自动旋转
        cameraControls: true,   // 允许用户控制视角
      ),
    );
  }
}

注意：在 pubspec.yaml 中声明资源：

assets:
  - assets/model.glb

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

适用于需要自定义光照、动画或复杂场景的情况。

添加依赖：
```
dependencies:
  three: ^0.9.0
```

基础实现代码：

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

void loadModel() async {
  // 初始化场景
  final scene = three.Scene();
  final camera = three.PerspectiveCamera(75, 1.0, 0.1, 1000);
  final renderer = three.WebGLRenderer();
  
  // 加载模型
  final loader = three.GLTFLoader();
  final gltf = await loader.loadAsync('assets/scene.gltf');
  scene.add(gltf.scene);
  
  // 添加光源
  scene.add(three.DirectionalLight(0xFFFFFF, 1));
  
  // 渲染循环
  void animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
}

关键注意事项：

模型格式：优先使用 .glb（二进制格式，加载更快）或 .gltf。
性能优化：压缩模型多边形数量，移动端建议模型文件小于5MB。
平台限制：
- model_viewer 在Android/iOS依赖原生组件，Web端基于<model-viewer>标签。
- three.dart 需通过Canvas渲染，兼容性更广但配置更复杂。

Flutter中如何加载和使用3D模型

1. 使用 model_viewer 库（推荐Web和移动端简单模型）

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

关键注意事项：

推荐工作流：

1. 使用 `model_viewer` 库（推荐Web和移动端简单模型）

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