Flutter 中的 3D 模型渲染：使用 model_viewer
Flutter 中的 3D 模型渲染：使用 model_viewer
使用model_viewer标签可直接在 Flutter 中渲染3D模型。
更多关于Flutter 中的 3D 模型渲染：使用 model_viewer的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在 Flutter 中，你可以使用 model_viewer 插件来渲染 3D 模型。model_viewer 基于 Google 的 <model-viewer> Web 组件，支持 glTF 和 GLB 格式的 3D 模型。首先，在 pubspec.yaml 中添加依赖：
dependencies:
model_viewer: ^1.0.0然后，在代码中使用 ModelViewer 组件：
import 'package:flutter/material.dart';
import 'package:model_viewer/model_viewer.dart';
class My3DModel extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('3D Model Viewer')),
body: ModelViewer(
src: 'assets/model.glb',
alt: 'A 3D model',
ar: true,
autoRotate: true,
cameraControls: true,
),
);
}
}确保将 3D 模型文件放置在 assets 文件夹中，并在 pubspec.yaml 中声明：
flutter:
assets:
- assets/model.glb运行应用后，你将看到 3D 模型在屏幕上渲染，并支持交互操作。
在 Flutter 中渲染 3D 模型，可以使用 model_viewer 插件，它是一个基于 Web 的 3D 模型查看器，支持 glTF 和 GLB 格式的 3D 模型。model_viewer 使用 Google 的 <model-viewer> 组件，可以在 Flutter 应用中嵌入 3D 模型。
安装 model_viewer
首先，在 pubspec.yaml 文件中添加 model_viewer 依赖：
dependencies:
flutter:
sdk: flutter
model_viewer: ^1.0.0然后运行 flutter pub get 来安装依赖。
使用 model_viewer 渲染 3D 模型
以下是一个简单的示例，展示如何在 Flutter 应用中使用 model_viewer 渲染一个 3D 模型：
import 'package:flutter/material.dart';
import 'package:model_viewer/model_viewer.dart';
class My3DModelViewer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('3D Model Viewer'),
),
body: Center(
child: ModelViewer(
src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
alt: 'A 3D model of an astronaut',
ar: true,
autoRotate: true,
cameraControls: true,
),
),
);
}
}
void main() => runApp(MaterialApp(
home: My3DModelViewer(),
));参数说明
src: 3D 模型的 URL 或本地路径。alt: 模型的替代文本，用于辅助功能。ar: 是否启用 AR 模式。autoRotate: 是否自动旋转模型。cameraControls: 是否允许用户使用鼠标或触摸控制相机。
运行效果
运行这个应用后，你将看到一个可以交互的 3D 模型，用户可以通过鼠标或触摸来控制视角，还可以启用 AR 模式在现实世界中查看模型。
注意事项
model_viewer依赖于 Web 技术，因此在 Web 平台上运行效果最佳。在移动设备上，某些功能（如 AR）可能受到限制。- 如果需要更复杂的 3D 渲染功能，可能需要使用其他 3D 引擎（如 Unity）并通过 Flutter 插件进行集成。
通过 model_viewer，你可以轻松地在 Flutter 应用中嵌入和展示 3D 模型，为用户提供更丰富的视觉体验。
