Flutter – 添加 3D 对象

3D 对象是具有 3 个维度的长度、宽度和深度的对象。这些对象在用于各种目的时提供了很好的用户体验。将这种类型的可视化添加到您的应用程序将对用户非常有帮助，这反过来又有助于您的应用程序发展并吸引大量受众。

所以今天我们将构建一个简单的基于flutter的应用程序来演示如何将3D 对象添加到应用程序项目中。

第一步：新建一个flutter应用项目并添加必要的依赖

• 打开 VS Code，按“Ctrl+Shift+P”并选择“Flutter: New Application Project”
• 选择要添加此flutter项目的文件夹或新建一个
• 然后在选择文件夹后，为您的项目命名并点击“Enter”
• Flutter会为你创建一个新项目，然后在左下角点击“pubspec.yaml”文件
• 添加以下依赖项，其中包括用于将 3D 对象添加到您的项目的flutter cube 包

dependencies:
  flutter:
    sdk: flutter
  flutter_cube: ^0.0.6

第 2 步：创建资产文件夹并添加所需的资产。

• 在左侧寻找“新建文件夹”选项，添加一个新文件夹并将其命名为“资产”
• 右键单击该文件夹，然后单击“在文件资源管理器中显示”。
• 转到此链接，下载文件夹，或者您可以从这里或从提供 3D 模型的任何其他网站选择您喜欢的 3D 对象。
• 将这些文件夹复制到assets文件夹，再次打开“ pubspec.yaml ”文件，在“ flutter ”部分添加以下内容

flutter:
  uses-material-design: true
  assets:
      - assets/Astronaut/
      - assets/material/
      - assets/earth/

第 3 步：用于添加 3D 对象的Dart代码。

这是“main.js”的代码。 “ lib ”文件夹中的“ dart ”文件

Dart

import 'package:flutter/material.dart';
import 'package:flutter_3d/home_page.dart';
  
import 'home_page.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 3D',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

第 4 步：将主页代码添加到我们的项目中

• 右键单击“lib”文件夹，添加新文件并将其命名为“ home_page.conf”。dart“
• 以下是“ home_page ”的代码。 dart”文件

Dart

// Dart Program to add 3D objects to your project
  
// importing material.dart
import 'package:flutter/material.dart'; 
  
// importing flutter cube package
import 'package:flutter_cube/flutter_cube.dart';
  
// creating class of stateful widget
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
    
  // adding necessary objects
  Object earth;
  Object astro;
  Object material;
  @override
  void initState() {
      
    // assigning name to the objects and providing the
    // object's file path (obj file) 
    earth = Object(fileName: "assets/earth/earth_ball.obj");
    astro = Object(fileName: "assets/Astronaut/Astronaut.obj");
    material = Object(fileName: "assets/material/model.obj");
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
        
      // creating appbar
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "3D Objects in Flutter",
          style: TextStyle(
              color: Colors.greenAccent,
              fontWeight: FontWeight.bold,
              fontSize: 25),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: Container(
          
        // providing linear gradient to the
        // background with two colours
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Colors.blueAccent, Colors.greenAccent],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight)),
        child: Column(
          children: [
            Expanded(
                
              // adding the cube function to
              // create the scene of our object
              child: Cube(
                onSceneCreated: (Scene scene) {
                  scene.world.add(material);
                  scene.camera.zoom = 10;
                },
              ),
            ),
              
            // adding the earth object
            Expanded(
              child: Cube(
                onSceneCreated: (Scene scene) {
                  scene.world.add(earth);
                  scene.camera.zoom = 10;
                },
              ),
            ),
              
            // adding the astro object
            Expanded(
              child: Cube(
                onSceneCreated: (Scene scene) {
                  scene.world.add(astro);
                  scene.camera.zoom = 10;
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

第 5 步：添加新设备并运行项目

• 将新设备添加到您的项目中，例如任何 android 移动模拟器、真实设备或 chrome(web)
• 之后按“Ctrl + F5”或转到“运行”>“无需调试即可运行”并查看连接设备上的输出

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！