flutter 中的 AR 实现

Question

我需要在 Flutter 应用程序中实现 AR，并支持 Web。在 Flutter 中实现 AR 的最佳方法是什么？这些方法在 Web 上也受支持吗？

我尝试使用 3D 模型查看器在相机屏幕上显示模型，这是一个非常简单的开始。 顺便读了一些关于 Flutter 中 AR 的文章。

Answer 1

在 Flutter 中实现 AR 的最佳方法

在 Flutter 中实现 AR 主要有两种方式：

1. 使用 ARCore 和 ARKit 插件： 这些插件分别为 Android 和 iOS 设备提供原生 AR 功能。
2. 使用基于 Web 的 AR 库： 这种方法允许您创建可以在任何具有 Web 浏览器的设备上查看的 AR 体验。

网络支持

ARCore 和 ARKit 插件在 Web 上不受支持，因此如果您想创建基于 Web 的 AR 体验，则需要使用基于 Web 的 AR 库。

3D模型查看器

3D模型查看器可用于在相机屏幕上显示3D模型，但它们不提供任何AR功能。

推荐方法

如果您需要在 Flutter 应用程序中实现 AR 并且还支持 Web，我建议使用基于 Web 的 AR 库。这将使您能够创建可在任何设备（包括移动设备、台式电脑和笔记本电脑）上查看的单一 AR 体验。

基于网络的 AR 库

有许多基于网络的 AR 库可用，例如：

• A 型框架
• AR.js
• 三.js

开始使用

要在 Flutter 中开始使用基于 Web 的 AR，您可以按照以下步骤操作：

1. 创建一个新的 Flutter 项目。
2. 将基于 Web 的 AR 库添加到您的项目中。
3. 创建一个新的 Flutter 小部件，使用基于 Web 的 AR 库来展示您的 AR 体验。
4. 在网络浏览器中运行您的 Flutter 应用程序。

示例

以下代码显示了一个简单的 Flutter 小部件示例，该小部件使用 A-Frame 基于 Web 的 AR 库来显示立方体的 3D 模型：

import 'package:flutter/material.dart';

class ArCube extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AScene(
        children: [
          AEntity(
            geometry: ABoxGeometry(width: 1, height: 1, depth: 1),
            material: AStandardMaterial(color: Colors.red),
          ),
        ],
      ),
    );
  }
}

要运行此示例，您首先需要将 A-Frame 包添加到您的 Flutter 项目中。您可以通过将以下行添加到您的

pubspec.yaml

文件中来完成此操作：

dependencies:
  a_frame: ^3.1.2

添加 A-Frame 包后，您可以在 Web 浏览器中运行 Flutter 应用程序。为此，请在终端中运行以下命令：

flutter run -d chrome

这将打开一个新的 Chrome 浏览器窗口，并运行您的 Flutter 应用程序。

结论

基于 Web 的 AR 库提供了一种创建 AR 体验的方法，可以在任何具有 Web 浏览器的设备上查看该体验。这使得它们成为需要在应用程序中实现 AR 并支持 Web 的 Flutter 开发人员的不错选择。