在Flutter專案中加入3D

環境：mac m1 | vscode | android 12

第一步：新增一個flutter 專案

• 打開Vscode 按下 ⇧⌘P (同時) 就會出現以下畫面
• 點選new project -> application -> 輸入你的project name 跟要放在哪裡

第二步：加入插件

• 開啟pubspec.yaml檔案
• 加入model_viewer_plus

第三步：加入3d glb檔案

• 在專案中加入一個assets資料夾
• 將glb檔案放進去

• 加入路徑至pubspec.yaml檔案中

第五步：更改android設定，要run在android裝置

• 將android minSdkVersion version改成19

• 將 android:usesCleartextTraffic=”true” 加入AndroidManifest.xml檔案中

第六步：將以下程式碼加入main.dart中

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return const Center(
        child: ModelViewer(
      src: 'assets/bicycle.glb',  // 這邊要放你的圖檔名稱
      backgroundColor: Colors.white,
      autoPlay: true,
    ));
  }
}

第七步：run在android設備

• 就會出現你的3D圖了

以上為個人實作經驗分享，若有不同的情況發生，歡迎以下留言討論。