在 Flutter 中添加 3D 对象
Flutter 中的 3D 对象是什么?
3D 对象类似于三维物体，我们在应用程序中显示它们以制作动画。我们以 3D 对象形式显示的图像可以进行三维旋转来查看。
在 Flutter 中实现 3D 对象
我们将创建一个简单的应用程序，其中将在我们的 Android 应用程序中显示一个文本视图和一个简单的 3D 对象。我们将按照分步指南在 Android 应用程序中实现 Toast 消息。
步骤 1 - 在 Android Studio 中创建一个新的 Flutter 项目。
按照以下屏幕所示导航到 Android Studio。在下面的屏幕中，点击"新建项目"以创建一个新的 Flutter 项目。
点击"新建项目"后，您将看到以下屏幕。
在此屏幕中，您必须选择"Flutter 应用程序"，然后点击"下一步"，您将看到以下屏幕。
在此屏幕中，您需要指定项目名称，然后点击"下一步"即可。
步骤 2 - 在您的项目中添加 3D 图像。
从此链接下载 3D 图像，并导航到您的 Flutter 项目。右键单击项目根目录 >"新建">"目录"，并将其命名为 assets。复制下载的资源文件夹，并将其粘贴到您的 assets 文件夹中。
步骤 3:使用 pubspec.yaml 文件。
在 pubspec.yaml 文件的 dev_dependencies 部分添加 Flutter cube 的依赖项。同时，在 pubspec.yaml 文件中添加资源。以下是代码。
dev_dependencies: flutter_test: sdk: flutter # The "flutter_lints" package below contains a set of recommended lints to # encourage good coding practices. The lint set provided by the package is # activated in the `analysis_options.yaml` file located at the root of your # package. See that file for information about deactivating specific lint # rules and activating additional ones. flutter_lints: ^1.0.0 flutter_cube: ^0.0.6 # For information on the generic Dart part of this file, see the # following page: https://dart.dev/tools/pub/pubspec # The following section is specific to Flutter. flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - assets/earth/
添加上述代码后，只需点击"Pub get"即可安装项目中的所有依赖项。
步骤 4 - 使用 main.dart 文件。
导航到您的项目>lib>main.dart 文件，并向其中添加以下代码。代码中添加了注释，以便您详细了解。
语法
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_cube/flutter_cube.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// 这个小部件是你的应用程序的根。
@override
Widget build(BuildContext context) {
return MaterialApp(
// 在下面的行中指定标题。
title: 'Flutter Demo',
// 在下面一行隐藏我们的调试横幅
debugShowCheckedModeBanner: false,
// 在下面设置主题。
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 在下一行显示主页
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 在下面为地球创建一个物体
late Object earth;
// 下方线初始化状态
@override
void initState() {
// 在初始化地球对象的下方
earth = Object(fileName: "assets/earth/earth_ball.obj");
super.initState();
}
@override
Widget build(BuildContext context) {
// 在下面创建我们的 UI。
return Scaffold(
// 在下面的行上创建一个中心小部件。
body: Center(
// 在下面的行上创建一个列
child: Column(
// 在指定对齐方式的下方
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// 在下一行添加一个大小框
const SizedBox(
height: 100,
),
// 在下一行添加文本以显示标题文本。
const Text(
// 在下一行指定文本消息
"3D Objects in Flutter",
// 在指定文本样式的下一行
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
//在下一行添加一个大小框
const SizedBox(
height: 20,
),
//在下面的行上创建一个扩展的小部件来显示地球
Expanded(
// 在下一行创建一个立方体
child: Cube(
// 在下面一行创建场景
onSceneCreated: (Scene scene) {
// 在下面一行添加一个地球场景
scene.world.add(earth);
// 在下方设置相机进行缩放。
scene.camera.zoom = 5;
},
),
),
],
),
),
);
}
}
说明
在上面的代码中，我们可以看到 main 方法，该方法调用了我们下面创建的 MyApp 类，并将其作为无状态小部件。在这个无状态小部件中，我们创建了一个构建方法，并在该方法中返回 Material 应用。在 Material 应用中，我们指定了应用标题、应用主题、主页(需要显示)，并将调试检查模式横幅设置为 false。
之后，我们创建了一个 Home Page 状态方法，该方法将扩展 Home Page 的状态。在这个 Home Page 方法中，我们创建了一个名为 earth 的对象变量。然后，我们创建了一个 initState 方法，并在该方法中使用我们在 assets 文件夹中添加的文件路径初始化 earth 变量。
之后，我们创建了一个构建方法，并在该方法中指定了要居中的 body，然后在 body 中创建了一个列，并在列中指定了横轴和主轴对齐方式，以使视图与中心对齐。之后，我们创建子项，并在其中创建我们的小部件。首先，我们创建一个大小合适的框，用于添加顶部边距。然后，我们创建一个 Text 小部件，用于显示应用名称的文本。之后，我们再次添加一个大小合适的框，用于添加间距。最后，我们添加一个 Expanded 小部件来显示我们的 3D 对象。
在这个扩展的小部件中，我们添加了一个子项，即立方体。在这个立方体中，我们添加了 onScene，并将场景设置为地球，并将相机缩放比例设置为 5。
添加上述代码后，只需点击顶部栏中的绿色图标即可在移动设备上运行我们的应用程序。
注意 - 确保您已连接到真实设备或模拟器。
输出
结论
在以上教程中，我们了解了 Flutter 中的 3D 对象是什么，以及如何在应用程序中添加和使用 3D 对象。
