💻

【Flutter】3Dモデルデータ・AR表示の実装方法

2022/11/27に公開
4

記事の概要

本記事では、Flutterで簡単に3Dモデルの表示、ARでの表示をする実装方法とその周辺用語に関して解説する。
実装にはFlutterのプラグインであるmodel_viewer_plusを利用する。
※本記事ではiOSでの実装方法のみを扱う。

前提知識

model_viewer_plusとは

・Flutterで3Dモデルの表示、ARでの表示を簡単に実装できるパッケージ。
model-viewerをWebViewに埋め込んで表示するウィジェットを提供する。
https://pub.dev/packages/model_viewer_plus

model-viewerとは

・Googleが開発しているオープンソースのプロジェクトであり、Web上で簡単に3Dモデル、ARの表示ができる機能を提供する。
・model-viewerでは、Androidの場合Scene Viewer、iOSの場合AR Quick Lookというネイティブの機能を呼び出すことで3DモデルやARでの表示を実現している。
https://modelviewer.dev/

AR Quick Lookとは

・Appleが提供する機能。3Dモデルの表示やARでの表示機能を提供している。
・AR Quick LookはiOS端末のSafariのみで動作する。
・AR Quick Lookで表示できる3Dモデルデータはusdz形式である必要がある。

Scene Viewerとは

・Googleが提供する機能。3Dモデルの表示やARでの表示機能を提供している。
・ARCoreをサポートするAndroid端末のブラウザで動作する。
・Scene Viewerで表示できる3Dモデルデータはglb/gltf形式である必要がある。

実装手順

model_viewer_plusを利用して3Dモデルの表示と、ARでの表示を実装する。
1. ライブラリのインストール

pubspec.yaml
dependencies:
  model_viewer_plus: ^1.3.3

2. Info.plistに設定値の追加
ios/Runner/Info.plistに以下の値を追加する。

Info.plist
<key>io.flutter.embedded_views_preview</key>
<true/>

3. main.dartの実装

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

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Model Viewer")),
        // ①ModelViewerウィジェットの各プロパティを設定する
        body: ModelViewer(
          src: 'https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb',
          iosSrc: 'https://modelviewer.dev/shared-assets/models/Astronaut.usdz',
          ar: true,
          autoRotate: true,
          cameraControls: true,
        ),
      ),
    );
  }
}

ModelViewerウィジェットの各プロパティの解説

  • src :
    3DモデルのURLを指定する。glbまたはgltf形式を指定する必要がある。
    ここで指定したモデルデータがアプリ内のWebViewに表示される。
    以下のようにURLではなく、あらかじめ3DモデルデータをダウンロードしておきFlutterアセットとして指定して読み込むこともできる。
main.dart
body: ModelViewer(
          src: 'assets/NeilArmstrong.glb',
          ---省略---
        ),
  • iosSrc :
    usdz形式の3DモデルのURLを指定する。
    ここで指定したモデルデータがAR Quick Lookで利用される。
    AR Quick Lookはアプリ内のWebViewに表示されている3Dビューアーボタン(画面右下)で呼び出すSafariから起動できる。
    以下のようにURLではなく、あらかじめ3DモデルデータをダウンロードしておきFlutterアセットとして指定して読み込むこともできる。
main.dart
body: ModelViewer(
          iosSrc: 'assets/Astronaut.usdz',
          ---省略---
        ),
  • ar :
    デバイスでのAR機能の有効/無効を設定する。

  • autoRotate :
    モデルの自動回転機能の有効/無効を設定する。

  • cameraControls :
    マウス/タッチによるモデルコントロール機能の有効/無効を設定する。

その他のプロパティに関しては公式のドキュメントを参照。

動作確認

※動作確認のためのデバッグでは、シュミレータではなくiphone SE2実機(iOS:15.6.1)を利用。

  1. アプリ起動

    srcで指定したデータがアプリ内のWebViewに表示される。

  2. 3Dビューアーボタン(画面右下)をタップ
    3DビューアーボタンはiOS16以上では表示されません。 model_viewer_plusのREADMEに以下のように説明されています。(2023/10/22追記)

Compatibility
・iOS (AR View may not avaliable on iOS 16+)


Safariが起動し、iosSrcに指定したモデルが表示される。

  1. Safari上でモデルをタップしAR Quick Lookを起動

    ARでモデルの表示が確認できる。

実装コード

今回実装したコード全文

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

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Model Viewer")),
        body: ModelViewer(
          src: 'https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb',
          iosSrc: 'https://modelviewer.dev/shared-assets/models/Astronaut.usdz',
          ar: true,
          autoRotate: true,
          cameraControls: true,
        ),
      ),
    );
  }
}

まとめ

model_viewer_plusを利用して3Dモデルデータの表示、ARでの表示を簡単に実装することができた。本記事ではiOSのみを扱ったが、model_viewer_plusのREADMEを参考にすれば、Android/Webに関しても簡単に実装ができそうである。

参考

・Appleが提供するusdz形式のサンプル3Dデータ
https://developer.apple.com/augmented-reality/quick-look/
・model-viewer
https://modelviewer.dev/

GitHubで編集を提案

Discussion

アムロアムロ

ARに興味を持ち、こちらの記事を参考にさせていただきました!
私の実機はiPhoneXS(iOS 16.5)なのですが、画面右下に表示されるはずの『3Dビューアーボタン』が表示されません。
表示されない原因は端末起因かなと思ったのですが、D.K様の実機は何をお使いでしょうか?

D.KD.K

アムロ様
コメントありがとうございます。
記事執筆時はiPhone SE2(iOS 15.6)を利用していました。端末もしくはOSのバージョンに起因するかもしれません。

アムロアムロ

ご返信いただきありがとうございます。
本日READMEを読んだところ、iOS (AR View may not avaliable on iOS 16+) と記載されていましたので、
どうやらOS起因の可能性が高そうですね。

D.KD.K

そのようですね。情報いただきありがとうございます。
記事にも注意書きで修正するようにします。