日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何在 Flutter 中構(gòu)建增強(qiáng)現(xiàn)實(shí)應(yīng)用

AR 應(yīng)用程序?yàn)槲覀冊谙鄼C(jī)上的體驗(yàn)添加數(shù)據(jù)或視覺效果。流行的示例包括 Instagram 過濾器、Snapchat 過濾器、各種地圖應(yīng)用程序等。

創(chuàng)新互聯(lián)建站主營永吉網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,永吉h5成都小程序開發(fā)搭建,永吉網(wǎng)站營銷推廣歡迎永吉等地區(qū)企業(yè)咨詢

AR 允許用戶將虛擬對象放置在現(xiàn)實(shí)世界中,然后與它們進(jìn)行交互。AR 應(yīng)用程序?qū)ⅲㄎ艺J(rèn)為)在游戲中特別流行——像 Microsoft Hololens 和 Google Glass 這樣的 AR 耳機(jī)設(shè)備提供真正的游戲體驗(yàn),購物和工業(yè)領(lǐng)域。

也許我們中的一個人可以構(gòu)建一個應(yīng)用程序,我可以使用它輕松檢查適合我的帽子類型?老實(shí)說,在購買和退回不滿意的東西之前,我真的需要它。看,AR 可以幫助我們在家中輕松嘗試。

在今天的文章中,我們將一起來學(xué)習(xí)以下內(nèi)容:

  • 什么是 ARCore?
  • 什么是 ARKit?
  • 什么是 ar_flutter_plugin
  • 如何使用上述插件?

注意,學(xué)習(xí)本教程需要我們對 Flutter 有一些基本的知識。如果你是 Flutter 新手,請通過Flutter官方文檔了解一下。

1、什么是 ARCore?

ARCore 是 Google 的平臺,可讓我們的手機(jī)感知環(huán)境、了解世界并與信息交互。并提供一些可跨 Android 和 iOS 設(shè)備訪問的API ,從而實(shí)現(xiàn)共享的 AR 體驗(yàn)。

以下是 ARCore 支持的設(shè)備要求。

  • IOS系統(tǒng),需要蘋果手機(jī)的系統(tǒng)在iOS 11.0 或更高版本上。
  • Android 系統(tǒng),需要安卓手機(jī)設(shè)備的系統(tǒng)在 Android 7.0 或更高版本的 Android 系統(tǒng)。

谷歌的 ARCore 文檔是這樣說的:“從根本上說,ARCore 做了兩件事:在移動設(shè)備移動時跟蹤它的位置,并建立它對現(xiàn)實(shí)世界的理解。”

如果您正在尋找一些實(shí)際使用 ARCore 的示例,請查看這些使用 ARCore 的應(yīng)用程序。其中一些應(yīng)用 ARCore 來查看您自己空間中的電子商務(wù)產(chǎn)品的尺寸,例如宜家目錄,而另一些則是基于娛樂的,例如星球大戰(zhàn) AR 游戲。

2、什么是 ARKit?

ARKit 是 Apple 的一套工具,可讓您為 iOS 構(gòu)建增強(qiáng)現(xiàn)實(shí)應(yīng)用程序。在 iOS 11.0 或更高版本上使用 Apple A9 或更高版本(iPhone 6s/7/SE/8/X、iPad 2017/Pro)的任何人都可以使用 ARKit。對于某些功能,需要 iOS 12 或更高版本。

如果您正在尋找一些 ARKit 動作,請查看 Swift Playground。這是一款專為 iPad 和 Mac 打造的應(yīng)用,讓學(xué)習(xí) Swift 變得有趣。

ARKit 與 ARCore 有許多相似之處,它們的主要區(qū)別在于其 Apple 獨(dú)有的支持與 SceneKit 和 SpriteKit 配合得很好。我們可以從此處了解有關(guān) ARKit 的更多信息。

3、開始入門

我們可以從此下面的地址處下載包含所有預(yù)構(gòu)建 UI 的入門應(yīng)用程序,https://github.com/himanshusharma89/arcore_example/tree/starter

在編輯器中打開它,然后構(gòu)建并運(yùn)行應(yīng)用程序:

啟動項(xiàng)目的文件結(jié)構(gòu)如下所示:

  • main.dart – 整個應(yīng)用程序的入口點(diǎn)
  • homeView.dart - 這包含主視圖,有一個導(dǎo)航到 AR 視圖屏幕的按鈕
  • localAndWebObjectsView.dart - 屏幕顯示從本地和 Web 獲取 3D 對象的用法

什么是 ar_flutter_plugin?

ar_flutter_plugin(https://github.com/CariusLars/ar_flutter_plugin) 是一個用于 AR 的 Flutter 插件,支持 Android 上的 ARCore 和 iOS 設(shè)備上的 ARKit。你同時得到兩個!顯然,這是一個優(yōu)勢,因?yàn)槟槐貫榱硪粋€選擇開發(fā)。

此外,您可以從此地址(https://github.com/CariusLars/ar_flutter_plugin#plugin-architecture)了解此插件架構(gòu)內(nèi)容。

設(shè)置插件

01)、添加 Flutter 依賴

在 pubspec.yaml 文件中添加 ar_flutter_plugin:

...
dependencies:
flutter:
sdk: flutter
ar_flutter_plugin: ^0.6.2
...

02)、安卓配置

更新應(yīng)用級 build.gradle 文件中的 minSdkVersion:

android {
defaultConfig {
...
minSdkVersion 24
}
}

或者在 Android 目錄下的 local.properties 文件中添加 minSdkVersion:

flutter.minSdkVersion=24

并更新應(yīng)用級 build.gradle 文件:

android {
defaultConfig {
...
minSdkVersion localProperties.getProperty('flutter.minSdkVersion')
}
}

03)、iOS 配置

如果您在 iOS 中遇到權(quán)限問題,請?jiān)谀?iOS 目錄中添加以下 Podfile:

post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
# Additional configuration options could already be set here
# BEGINNING OF WHAT YOU SHOULD ADD
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
## dart: PermissionGroup.camera
'PERMISSION_CAMERA=1',
## dart: PermissionGroup.photos
'PERMISSION_PHOTOS=1',
## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
'PERMISSION_LOCATION=1',
## dart: PermissionGroup.sensors
'PERMISSION_SENSORS=1',
## dart: PermissionGroup.bluetooth
'PERMISSION_BLUETOOTH=1',′
# add additional permission groups if required
]
# END OF WHAT YOU SHOULD ADD
end
end
end

用法

在繼續(xù)之前,您需要了解以下 API:

  • ARView:使用 PlatformARView 創(chuàng)建與平臺相關(guān)的相機(jī)視圖
  • ARSessionManager:管理 ARView 的會話配置、參數(shù)和事件
  • ARObjectManager:管理一個 ARView 的所有節(jié)點(diǎn)相關(guān)的動作
  • ARAnchorManager:管理錨功能,如下載處理程序和上傳處理程序
  • ARLocationManager:提供獲取和更新設(shè)備當(dāng)前位置的能力
  • ARNode:節(jié)點(diǎn)對象的模型類

您可以從以下地址處了解更多 API。https://pub.dev/documentation/ar_flutter_plugin/latest/

使用本地或遠(yuǎn)程對象

最基本的用途之一是將 3D 對象從資產(chǎn)或網(wǎng)絡(luò)放置到屏幕上。

為此,您需要在 pubspec 文件中提供 .gltf 或 .glb 文件,如下所示:

什么是 glTF 或 GLB 文件?

glTF 是 3D 模型和場景的圖形語言傳輸格式。它有兩個擴(kuò)展:

  • .gltf:以 JSON/ASCII 格式存儲場景描述,包括節(jié)點(diǎn)層次結(jié)構(gòu)、相機(jī)和材質(zhì)
  • .glb:以二進(jìn)制格式存儲模型描述

您可以從此地址(https://en.wikipedia.org/wiki/GlTF)處了解有關(guān) glTF 的更多信息。

現(xiàn)在,轉(zhuǎn)到 localAndWebObjectsView.dart 文件并創(chuàng)建以下變量:

late ARSessionManager arSessionManager;
late ARObjectManager arObjectManager;
//String localObjectReference;
ARNode? localObjectNode;
//String webObjectReference;
ARNode? webObjectNode;

接下來,使用 ARView 小部件更新空容器,如下所示:

ARView(
onARViewCreated: onARViewCreated,
)

在這里,您將 onARViewCreated 方法用于小部件的 onARViewCreated 屬性:

void onARViewCreated(
ARSessionManager arSessionManager,
ARObjectManager arObjectManager,
ARAnchorManager arAnchorManager,
ARLocationManager arLocationManager) {
// 1
this.arSessionManager = arSessionManager;
this.arObjectManager = arObjectManager;
// 2
this.arSessionManager.onInitialize(
showFeaturePoints: false,
showPlanes: true,
customPlaneTexturePath: "triangle.png",
showWorldOrigin: true,
handleTaps: false,
);
// 3
this.arObjectManager.onInitialize();
}

在上面的代碼中,您正在執(zhí)行以下操作:

  • 定義 arSessionManager 和 arObjectManager 變量
  • 使用 ARSessionManager 的 onInitialize 方法設(shè)置會話屬性
  • 這些設(shè)置用于可視化特征點(diǎn)、平面、世界坐標(biāo)系等。在這里,您使用 customPlaneTexturePath 來引用您的 pubspec 中定義的資產(chǎn)。

另外,使用 ARObjectManager 的 onInitialize 來設(shè)置管理器。

創(chuàng)建和刪除本地對象

現(xiàn)在,我們需要使用“添加/刪除本地對象”按鈕使用 onLocalObjectButtonPressed 回調(diào)創(chuàng)建或刪除 localObjectNode,如下所示:

Future onLocalObjectButtonPressed() async {
// 1
if (localObjectNode != null) {
arObjectManager.removeNode(localObjectNode!);
localObjectNode = null;
} else {
// 2
var newNode = ARNode(
type: NodeType.localGLTF2,
uri: "assets/Chicken_01/Chicken_01.gltf",
scale: Vector3(0.2, 0.2, 0.2),
position: Vector3(0.0, 0.0, 0.0),
rotation: Vector4(1.0, 0.0, 0.0, 0.0));
// 3
bool? didAddLocalNode = await arObjectManager.addNode(newNode);
localObjectNode = (didAddLocalNode!) ? newNode : null;
}
}

在這里,我們完成了以下操作:

檢查localObjectNode是否為null,如果不為null則刪除本地對象。

通過提供本地 glTF 文件路徑和類型以及包含節(jié)點(diǎn)的位置、旋轉(zhuǎn)和其他變換的坐標(biāo)系來創(chuàng)建一個新的 ARNode 對象。

將 newNode 添加到 ARView 的頂層(如 Stack)并將其分配給 localObjectNode。

NodeType 是一個枚舉,用于設(shè)置插件支持的節(jié)點(diǎn)類型,包括 localGLTF2、webGLB、fileSystemAppFolderGLB 和 fileSystemAppFolderGLTF2。

添加遠(yuǎn)程對象

接下來,您需要使用帶有 onWebObjectAtButtonPressed 回調(diào)的 Add / Remove Web Object 按鈕,如下所示:

Future onWebObjectAtButtonPressed() async {
if (webObjectNode != null) {
arObjectManager.removeNode(webObjectNode!);
webObjectNode = null;
} else {
var newNode = ARNode(
type: NodeType.webGLB,
uri:
"https://github.com/KhronosGroup/glTF-Sample-Models/raw/master/2.0/Duck/glTF-Binary/Duck.glb",
scale: Vector3(0.2, 0.2, 0.2));
bool? didAddWebNode = await arObjectManager.addNode(newNode);
webObjectNode = (didAddWebNode!) ? newNode : null;
}
}

上述方法與 onLocalObjectButtonPressed 方法類似,只是 URL 有所不同。在這里,URL 以來自網(wǎng)絡(luò)的 GLB 文件為目標(biāo)。

如果要跟蹤 3D 對象的位置或姿勢變化,則需要為此定義錨點(diǎn)。錨點(diǎn)描述或檢測現(xiàn)實(shí)世界中的特征點(diǎn)和平面,并簡單地讓您在世界中放置 3D 對象。

注意,特征點(diǎn)是圖像中的獨(dú)特位置。例如,角落、路口等。

即使環(huán)境隨時間發(fā)生變化并影響應(yīng)用程序的用戶體驗(yàn),這也可確保對象保持在其放置的位置。

最后,使用 dispose 方法對管理人員進(jìn)行處置,以釋放資源。

結(jié)論

最終的項(xiàng)目地址:https://github.com/himanshusharma89/arcore_example

在今天的文章中,我們了解了如何使用 Flutter 構(gòu)建增強(qiáng)現(xiàn)實(shí)應(yīng)用程序。對于下一步,您可以嘗試使用手勢旋轉(zhuǎn)或轉(zhuǎn)換對象,或者使用 Google Cloud Anchor API 或外部數(shù)據(jù)庫獲取 3D 對象。

我希望今天的內(nèi)容對你有用,如果你喜歡今天的內(nèi)容,記得點(diǎn)贊我,關(guān)注我,并分享給你身邊做開發(fā)的朋友,也許能夠幫助到他。

最后感謝你的閱讀,祝編程快樂!


網(wǎng)頁名稱:如何在 Flutter 中構(gòu)建增強(qiáng)現(xiàn)實(shí)應(yīng)用
網(wǎng)站地址:http://www.dlmjj.cn/article/cceosgi.html