3D-Objekte sind solche Objekte, die 3 Dimensionen Länge, Breite und Tiefe haben. Diese Objekte bieten eine großartige Benutzererfahrung, wenn sie für verschiedene Zwecke verwendet werden. Und das Hinzufügen einer solchen Art von Visualisierung zu Ihrer App wird für den Benutzer sehr hilfreich sein, was wiederum dazu beiträgt, dass Ihre App wächst und auch ein großes Publikum anzieht.

Deshalb werden wir heute eine einfache Flatter-basierte App erstellen, um zu demonstrieren, wie Sie 3D-Objekte zu Ihrem App-Projekt hinzufügen können.

Schritt 1: Erstellen eines neuen Flutter-Anwendungsprojekts und Hinzufügen der erforderlichen Abhängigkeiten

• Öffnen Sie VS Code, drücken Sie „Strg+Umschalt+P“ und wählen Sie „Flutter: Neues Anwendungsprojekt“
• Wählen Sie den Ordner aus, dem Sie dieses Flutter-Projekt hinzufügen möchten, oder erstellen Sie einen neuen
• Nachdem Sie den Ordner ausgewählt haben, geben Sie Ihrem Projekt einen Namen und drücken Sie „Enter“.
• Flutter erstellt ein neues Projekt für Sie, klicken Sie dann links unten auf die Datei „pubspec.yaml“.
• Fügen Sie die folgenden Abhängigkeiten hinzu, die das Flutter-Cube-Paket zum Hinzufügen der 3D-Objekte zu Ihrem Projekt enthalten

dependencies:
  flutter:
    sdk: flutter
  flutter_cube: ^0.0.6

Schritt 2: Erstellen des Assets-Ordners und Hinzufügen der erforderlichen Assets.

• Suchen Sie auf der linken Seite nach der Option „Neuer Ordner“, fügen Sie einen neuen Ordner hinzu und nennen Sie ihn „ Assets “ .
• Klicken Sie mit der rechten Maustaste auf den Ordner und klicken Sie auf „Im Datei-Explorer anzeigen“.
• Gehen Sie zu diesem Link , laden Sie die Ordner herunter, oder wählen Sie Ihre bevorzugten 3D-Objekte von hier oder von jeder anderen Website, die 3D-Modelle bereitstellt.
• Kopieren Sie diese Ordner in den Assets-Ordner, öffnen Sie die Datei „ pubspec.yaml “ erneut und fügen Sie Folgendes zum Abschnitt „ flattern “ hinzu

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

Schritt 3: Dart-Code zum Hinzufügen der 3D-Objekte.

Dies ist der Code für die Datei „ main.dart “ im Ordner „ lib “.

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(),
    );
  }
}

Schritt 4: Hinzufügen des Homepage-Codes zu unserem Projekt 

• Klicken Sie mit der rechten Maustaste auf den Ordner „lib“, fügen Sie die neue Datei hinzu und nennen Sie sie „ home_page.dart “ .
• Das Folgende ist der Code für die Datei „ home_page.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<HomePage> {
    
  // 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;
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Schritt 5: Hinzufügen eines neuen Geräts und Ausführen des Projekts

• Fügen Sie Ihrem Projekt ein neues Gerät hinzu, z. B. einen beliebigen Android-Mobilemulator, ein echtes Gerät oder Chrome (Web).
• Drücken Sie danach „Strg + F5“ oder gehen Sie zu „Ausführen“ > „Ausführen ohne Debugging“ und sehen Sie sich die Ausgabe auf Ihrem angeschlossenen Gerät an

Ausgabe: