在Flutter中新增3D物件

---

什麼是Flutter中的3D物件？

3D物件就像三維物件，我們在應用程式中顯示它們以對影像進行動畫處理。我們可以對以3D物件形式顯示的影像進行三維旋轉以檢視它。

在Flutter中實現3D物件

我們將建立一個簡單的應用程式，在其中我們將顯示一個文字檢視和一個簡單的3D物件在我們的Android應用程式中。我們將遵循分步指南在Android應用程式中實現吐司訊息。

步驟1 - 在Android Studio中建立一個新的Flutter專案。

導航到Android Studio，如下面的螢幕所示。在下面的螢幕中，單擊“新建專案”以建立新的Flutter專案。

單擊“新建專案”後，您將看到下面的螢幕。

在此螢幕中，您必須選擇Flutter Application，然後單擊“下一步”，您將看到下面的螢幕。

在此螢幕中，您必須指定專案名稱，然後只需單擊“下一步”即可

步驟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);

   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         
         // on below line specifying title.
         title: 'Flutter Demo',
         
         // on below line hiding our debug banner
         debugShowCheckedModeBanner: false,
         
         // on below line setting theme.
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         
         // on below line displaying home page
         home: const MyHomePage(),
      );
   }
}

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

   @override
   State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
   
   // on below line creating an object for earth
   late Object earth;

   // on below line initializing state
   @override
   void initState() {
   
      // on below line initializing earth object
      earth = Object(fileName: "assets/earth/earth_ball.obj");
      super.initState();
   }

   @override
   Widget build(BuildContext context) {
      
      // on below line creating our UI.
      return Scaffold(
      
         // on below line creating a center widget.
         body: Center(
         
            // on below line creating a column
            child: Column(
            
               // on below line specifying alignment
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
               
                  // on below line adding a sized box
                  const SizedBox(
                     height: 100,
                  ),
                  
                  // on below line adding a text for displaying a text for heading.
                  const Text(
                  
                     // on below line specifying text message
                     "3D Objects in Flutter",
                     
                     // on below line specifying text style
                     style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                  ),
                  
                  // on below line adding a sized box
                  const SizedBox(
                     height: 20,
                  ),
                  
                  // on below line creating an expanded widget for displaying an earth
                  Expanded(
                  
                     // on below line creating a cube
                     child: Cube(
                     
                        // on below line creating a scene
                        onSceneCreated: (Scene scene) {
                        
                           // on below line adding a scene as earth
                           scene.world.add(earth);
                           
                           // on below line setting camera for zoom.
                           scene.camera.zoom = 5;
                        },
                     ),
                  ),
               ],
            ),
         ),
      );
   }
}

解釋

在上面的程式碼中，我們可以看到main方法，在其中我們呼叫我們建立的MyApp類，作為無狀態小部件。在這個無狀態小部件中，我們建立一個build方法，在其中我們返回我們的material app。在material app中，我們指定應用程式標題、應用程式主題、要顯示的主頁以及將除錯檢查模式橫幅設定為false。

之後，我們建立一個HomePage state方法，它將擴充套件HomePage的狀態。在這個HomePage方法中，我們為名為earth的物件建立一個變數。然後我們建立一個initState方法，在其中我們使用我們在assets資料夾中新增的檔案路徑初始化earth變數。

之後，我們建立一個build方法，在其中我們指定一個主體到中心，然後在這個主體中，我們建立一個列，在其中我們指定橫軸和主軸對齊方式以將檢視對齊到中心。之後，我們建立子項，並在其中我們將建立我們的widget。首先，我們建立一個大小框以從頂部新增邊距。之後，我們建立一個Text widget以簡單地顯示應用程式名稱的文字。之後，我們再次新增一個大小框以新增間距。然後，我們新增一個Expanded widget以顯示我們的3D物件。

在這個expanded widget中，我們新增一個子項作為Cube。在這個cube中，我們新增onScene created，在其中我們將場景設定為earth並將相機縮放設定為5。

新增上述程式碼後，現在我們只需單擊頂欄中的綠色圖示即可在移動裝置上執行我們的應用程式。

注意 - 確保您已連線到您的真實裝置或模擬器。

輸出

結論

在上面的教程中，我們學習了什麼是Flutter中的3D物件以及如何將3D物件新增到我們的應用程式中並使用它。