💻

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

2022/11/27に公開約4,000字

記事の概要

本記事では、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実機(iOS:15.6.1)を利用。

  1. アプリ起動

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

  2. 3Dビューアーボタン(画面右下)をタップ

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

  3. 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

ログインするとコメントできます