⚡flutter_3d_viewer #

自定义的小部件和组件，可立即在您的项目中使用！

🎖安装 #

dependencies:
  flutter_3d_viewer: ^<latest_version>

❤喜欢这个工具？在这里捐赠。

🚀想了解更多关于Flutter的知识？查看这个链接！

💥通过LinkedIn联系我 关注这里。

🐛 Bug/请求 #

如果您遇到任何问题，请随时打开一个issue。如果您觉得库缺少功能，请在Github上提出请求，我会考虑实现它。Pull request也非常欢迎。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_3d_viewer/flutter_3d_viewer.dart'; // 导入flutter_3d_viewer
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Demo’,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: ‘Flutter Demo Home Page’),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
‘你已经按下了按钮多少次：’,
),
Text(
‘$_counter’,
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: ‘增加’,
child: const Icon(Icons.add),
),
);
}
}

使用3D视图器 #

要在应用中使用3D视图器，首先需要导入flutter_3d_viewer库。然后可以在MyHomePage类中添加一个ThreeDViewer小部件。

示例如下：

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按下了按钮多少次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            ThreeDViewer(
              model: Model(
                sourceType: SourceType.file,
                path: 'assets/models/your_model.obj', // 替换为你的模型路径
              ),
              width: 300,
              height: 300,
              backgroundColor: Colors.white,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

在这个示例中，我们添加了一个ThreeDViewer小部件来显示3D模型。确保将模型文件放在项目的assets目录下，并在pubspec.yaml文件中正确配置。

flutter:
  assets:
    - assets/models/your_model.obj

这样就可以在应用中成功加载并显示3D模型了。