Flutter 3D模型展示插件flutter_model_viewer的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

flutter_model_viewer #

这是一个新的Flutter项目。

开始使用 #

这个项目是一个用于Flutter的插件包的起点， 这种特殊的包包括Android和/或iOS的平台特定实现代码。

要开始使用Flutter，请查看我们的 在线文档，它提供了教程、示例、移动开发指南以及完整的API参考。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_model_viewer/flutter_model_viewer.dart';

void main() {
runApp(const MyApp());
}


class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);


@override
State<MyApp> createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
static const String src1 = ‘https://modelviewer.dev/shared-assets/models/Horse.glb’;
static const String src2 = ‘https://superd.oss-cn-beijing.aliyuncs.com/pub_upload/2022-03-04/ciawb49ie51dq3f0ho.glb’;
@override
void initState() {
super.initState();
}


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: const Text(‘插件示例应用’),
),
body: ModelViewer(
src: src1,
backgroundColor: const Color.fromRGBO(0, 0, 0, 0),
autoRotate: true,
autoPlay: true,
rotationPerSecond: “50deg”,
autoRotateDelay: 500,
cameraControls: true,
openCache: true,
onLoadError: () {
// 模型加载出错
},
onLoadSuccess: () {
// 模型加载完成
// _modelViewController.zoomModel(4.0);
},
),
floatingActionButton: FloatingActionButton(onPressed: () {
}, child: const Text(‘缩放’),),
),
);
}
}


更多关于Flutter 3D模型展示插件flutter_model_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter 3D模型展示插件flutter_model_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用flutter_model_viewer插件来展示3D模型的代码示例。flutter_model_viewer插件允许你轻松地在Flutter应用中展示GLB或GLTF格式的3D模型。

首先，确保你已经在pubspec.yaml文件中添加了flutter_model_viewer依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_model_viewer: ^0.14.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何在Flutter中使用flutter_model_viewer插件：

import 'package:flutter/material.dart';
import 'package:flutter_model_viewer/flutter_model_viewer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 3D Model Viewer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 3D Model Viewer Demo'),
      ),
      body: Center(
        child: ModelViewer(
          modelUrl: 'https://path/to/your/model.glb', // 替换为你的GLB或GLTF模型URL
          autoRotate: true,
          animationName: 'default', // 如果你的模型有动画，可以指定动画名称
          showControls: true,
          arMode: false, // 是否启用AR模式
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  }
}

在这个示例中：

  1. modelUrl 是你3D模型的URL，可以是GLB或GLTF格式。你需要将其替换为你自己的模型URL。
  2. autoRotate 设置为true，表示模型将自动旋转。你可以根据需要将其设置为false。
  3. animationName 是你模型中的动画名称（如果模型包含动画）。
  4. showControls 设置为true，表示显示控制按钮，如旋转、缩放等。
  5. arMode 设置为false，表示不启用AR模式。如果你希望使用AR功能，可以将其设置为true（但请注意，这可能需要额外的配置和硬件支持）。
  6. width 和 height 设置为double.infinity，使模型填满屏幕。你可以根据需要调整这些值。

确保你的模型URL是有效的，并且模型文件是可以访问的。如果模型文件在本地，你可能需要将其上传到服务器或通过其他方式提供访问URL。

希望这个示例对你有帮助！

回到顶部