原文地址:https://medium.com/flutterdevs/explore-model-viewer-in-flutter-e5988edbfe66
3D模型是具有3个测量长度,宽度和深度的模型。当用于不同目的时,这些模型可提供令人难以置信的用户体验。更重要的是,对您的应用程序增加这种感知对于用户非常有用,有助于您的应用程序开发并吸引大量的人群。
在本文,我们将**在Flutter中探索Model Viewer。**我们将实现一个模型查看器演示程序,并在您的flutter应用程序中使用model_viewer包以glTF和GLB格式显示3D模型。
地址:https://pub.dev/packages/model_viewer
Flutter小部件,用于在glTF和GLB设计中提供交互式3D模型。该小部件可将Google的<model-viewer>
Web部件插入WebView中。3D模型显示3D图片。
该演示视频展示了如何在Flutter中创建模型查看器。它显示了如何在flutter应用程序中使用model_viewer包来运行模型查看器。它以glTF和GLB格式显示3D模型,并通过鼠标,手触摸和自动旋转将其旋转360度。
模型查看器具有以下功能:
将依赖项添加到pubspec-yaml文件。
model_viewer:^ 0.8.1
添加 asset
assets:
- assets/
导入
import 'package:model_viewer/model_viewer.dart';
运行 flutter packages get
配置 AndroidManifest.xml (Android 9+ only)
要在Android 9+设备上使用此小部件,应允许您的应用程序与进行HTTP关联http://localhost:XXXXX
。Android 9(API级别28)将默认设置android:usesCleartextTraffic
从更改true
为false.
<application
android:name =“ io.flutter.app.FlutterApplication”
android:label =“ flutter_model_viewer_demo”
android:icon =“ @ mipmap / ic_launcher”
android:usesCleartextTraffic =“ true”>
在lib文件夹下创建一个新的dart文件:demo_view.dart
在主体中,我们将添加ModelViewer()。在内部,我们将为模型查看器添加一个backgroundColor;src表示用户添加URL和资产,仅支持glTF / GLB模型。
ModelViewer(
backgroundColor: Colors.teal[50],
src: 'assets/table_soccer.glb',
alt: "A 3D model of an table soccer",
autoPlay: true,
autoRotate: true,
cameraControls: true,
),
我们将添加alt mean,以使用自定义文本配置模型,该文本将向使用屏幕阅读器的观看者描述该模型;自动播放是指如果设置为true并且模型具有动画,则设置此属性后,动画将自动开始播放。默认为false。我们将添加autoRotate意味着它启用了模型的自动旋转。我们将添加cameraControls表示在平面视图中通过鼠标/触摸启用控件。当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。
import 'package:flutter/material.dart';
import 'package:model_viewer/model_viewer.dart';
class DemoView extends StatefulWidget {
@override
_DemoViewState createState() => _DemoViewState();
}
class _DemoViewState extends State<DemoView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Model Viewer Demo"),
automaticallyImplyLeading: false,
backgroundColor: Colors.black,
),
body: ModelViewer(
backgroundColor: Colors.teal[50],
src: 'assets/table_soccer.glb',
alt: "A 3D model of an table soccer",
autoPlay: true,
autoRotate: true,
cameraControls: true,
),
);
}
}
我希望这个博客将为您提供足够的信息,试图达到 的模型浏览器在你的Flutter项目**。某些模型查看器功能,参数,创建用于运行模型查看器的演示程序,并以glTF和GLB**格式显示3D模型,并通过鼠标,手触摸和在flutter应用程序中使用model_viewer包自动旋转360°度。因此,请尝试一下。