この章では、前章で定義したモデルURLを使い、画面内へ実際の3Dモデルを表示します。あわせて、指による回転と拡大・縮小を有効にします。

モデルの読み込み状態やエラー表示は、後の章で追加します。まずは、3Dビューアーを配置して操作できるところまで進めます。

8.1 3Dモデルのファイル形式を理解する

今回表示するモデルには、GLB形式を使用します。

GLBは、形状、材質、テクスチャなど、3Dモデルの表示に必要な情報を一つのファイルへまとめられる形式です。複数の関連ファイルを個別に管理する必要がないため、Webやモバイルアプリでの配信に向いています。

前章のModelSource.modelUrlには、インターネット上に公開されているGLBファイルのURLが設定されています。

static const String modelUrl =
    '<https://modelviewer.dev/shared-assets/models/Astronaut.glb>';

外部URLから読み込むため、動作確認時にはインターネット接続が必要です。

8.2 3D表示パッケージを読み込む

model_viewer_screen.dartへ、3Dモデル表示用パッケージを追加します。

import 'package:flutter_3d_controller/flutter_3d_controller.dart';

これにより、Flutter3DViewerとFlutter3DControllerを利用できるようになります。

Flutter3DViewerは3Dモデルを表示するWidgetです。Flutter3DControllerは、表示後のカメラ位置やモデル操作を制御するために使用します。

8.3 StatefulWidgetへ変更する

これまでの画面は、変化する値を持たないStatelessWidgetでした。しかし、3Dビューアーを操作するコントローラーは、画面が再構築されても同じものを保持する必要があります。

そのため、ModelViewerScreenをStatefulWidgetへ変更します。

class ModelViewerScreen extends StatefulWidget {
  const ModelViewerScreen({super.key});

  /// 画面の状態オブジェクトを生成します。
  ///
  /// 入力: なし
  /// 出力: [ModelViewerScreen]の状態
  @override
  State<ModelViewerScreen> createState() => _ModelViewerScreenState();
}

StatefulWidget自身は画面の設定を持ち、変化する値や処理は対応するStateクラスへ記述します。

8.4 3Dコントローラーを作成する

Stateクラスの中へ、コントローラーを定義します。