Flutter 中渲染3D 模型

原文位址：https://medium.com/flutterdevs/explore-model-viewer-in-flutter-e5988edbfe66

3D模型是具有3個測量長度，寬度和深度的模型。當用于不同目的時，這些模型可提供令人難以置信的使用者體驗。更重要的是，對您的應用程式增加這種感覺對于使用者非常有用，有助于您的應用程式開發并吸引大量的人群。

在本文，我們将**在Flutter中探索Model Viewer。**我們将實作一個模型檢視器示範程式，并在您的flutter應用程式中使用model_viewer包以glTF和GLB格式顯示3D模型。

位址：https://pub.dev/packages/model_viewer

介紹

Flutter小部件，用于在glTF和GLB設計中提供互動式3D模型。該小部件可将Google的

<model-viewer>

Web部件插入WebView中。3D模型顯示3D圖檔。

該示範視訊展示了如何在Flutter中建立模型檢視器。它顯示了如何在flutter應用程式中使用model_viewer包來運作模型檢視器。它以glTF和GLB格式顯示3D模型，并通過滑鼠，手觸摸和自動旋轉将其旋轉360度。

功能

模型檢視器具有以下功能：

呈現glTF和GLB模型。（此外，USDZ型号在iOS 12+上。）
支援具有可配置自動播放設定的動畫模型。
（可選）它支援将模型啟動到AR檢視器中。
可以選擇以可配置的延遲自動旋轉模型。
支援小部件的可配置背景色。

參數

**src：**此參數用于3D模型的URL或路徑。此參數是必需的。僅支援glTF / GLB型号。
**alt：**此參數用于設計具有自定義内容的模型，該内容将利用使用螢幕閱讀器或在任何情況下都依賴于額外的語義設定來了解他們所看到内容的觀察者來描繪模型。
**autoRotateDelay：**此參數用于設定在自動旋轉開始之前的延遲。價值的配置是以毫秒為機關的數字。預設值為3000。
**iosSrc：**此參數用于USDZ模型的URL，該模型将通過AR Quick Look在受支援的iOS 12+裝置上使用。
**arScale：**此參數用于控制Scene Viewer在AR模式下的縮放行為。設定為“固定”以使模型的縮放比例失效，進而将其始終設定為100％縮放比例。預設為“自動”，這允許調整模型的大小。

實作

将依賴項添加到pubspec-yaml檔案。

model_viewer：^ 0.8.1

複制

添加 asset

assets:
  - assets/

複制

導入

import 'package:model_viewer/model_viewer.dart';

複制

運作 flutter packages get

配置 AndroidManifest.xml (Android 9+ only)

要在Android 9+裝置上使用此小部件，應允許您的應用程式與進行HTTP關聯

http://localhost:XXXXX

。Android 9（API級别28）将預設設定

android:usesCleartextTraffic

從更改

true

為

false.

<application 
    android：name =“ io.flutter.app.FlutterApplication” 
    android：label =“ flutter_model_viewer_demo” 
    android：icon =“ @ mipmap / ic_launcher” 
    android：usesCleartextTraffic =“ true”>

複制

在dart代碼中實作

在lib檔案夾下建立一個新的dart檔案：demo_view.dart

在主體中，我們将添加ModelViewer（）。在内部，我們将為模型檢視器添加一個backgroundColor；src表示使用者添加URL和資産，僅支援glTF / GLB模型。

ModelViewer(
  backgroundColor: Colors.teal[50],
  src: 'assets/table_soccer.glb',
  alt: "A 3D model of an table soccer",
  autoPlay: true,
  autoRotate: true,
  cameraControls: true,
),

複制

我們将添加alt mean，以使用自定義文本配置模型，該文本将向使用螢幕閱讀器的觀看者描述該模型；自動播放是指如果設定為true并且模型具有動畫，則設定此屬性後，動畫将自動開始播放。預設為false。我們将添加autoRotate意味着它啟用了模型的自動旋轉。我們将添加cameraControls表示在平面視圖中通過滑鼠/觸摸啟用控件。當我們運作應用程式時，我們應該獲得螢幕的輸出，如螢幕下方的截圖所示。

完整實作

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

class DemoView extends StatefulWidget {
  @override
  _DemoViewState createState() => _DemoViewState();
}

class _DemoViewState extends State<DemoView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Model Viewer Demo"),
        automaticallyImplyLeading: false,
        backgroundColor: Colors.black,
      ),
      body: ModelViewer(
        backgroundColor: Colors.teal[50],
        src: 'assets/table_soccer.glb',
        alt: "A 3D model of an table soccer",
        autoPlay: true,
        autoRotate: true,
        cameraControls: true,
      ),
    );
  }
}

複制

總結

我希望這個部落格将為您提供足夠的資訊，試圖達到的模型浏覽器在你的Flutter項目**。某些模型檢視器功能，參數，建立用于運作模型檢視器的示範程式，并以glTF和GLB**格式顯示3D模型，并通過滑鼠，手觸摸和在flutter應用程式中使用model_viewer包自動旋轉360°度。是以，請嘗試一下。