无法使用 wikiitude 和 Phonegap 创建 AR 应用

Posted 2023-05-06

技术标签:

【中文标题】无法使用 wikiitude 和 Phonegap 创建 AR 应用【英文标题】：Can't create an AR app with wikitude and Phonegap 【发布时间】：2014-04-02 19:51:24 【问题描述】：

我需要为 android 和 ios 创建一个应用程序，它可以识别我国特定山脉的山峰（意大利。和..关于这个对不起我的英语不好，希望你能理解它）。我将使用phonegap 和wikiitude。我将详细介绍我所做的事情（基于他们的setup guide phonegap plugin ios），以便更好地解释自己。

指南说： 1-创建一个PhoneGap项目。现在，该文件夹已在正确的位置创建并且没有任何错误。 2a- 创建通用 www 的 World 文件夹。我已经手动创建了它。 2b-“示例部分包括几个如何创建建筑师世界的示例。”在这里，我假设我需要手动创建我的项目 World 文件夹内容，所以我做到了。我按照示例（index.html、js/、css/、assets/* 和以项目命名的 .js 文件）创建了一个空文件和文件夹结构。我继续阅读指南的示例部分。我特别关注 POI 示例，因为它们是我的应用程序的目的。我已经将那里提到的代码部分与我在 github 上找到的文件进行了交叉检查。最后，我将相关文件从它们的示例复制到我的应用程序 World 文件夹中。 3-为ios构建项目。成功完成。 4-使用特定命令添加插件。这已完成，没有任何错误。我的 World 文件夹中的文件已复制到我的 ios 中。 5- 使用 Xcode 启动应用程序。我已经截取了结果文件夹的屏幕截图（您可以在下面的评论中找到链接，我不能发布图片 XD）。

老实说，我什至不确定这是正确的过程，因为指南对此并不十分清楚。我假设我从上面的步骤 2b 获得的 .js 文件是我需要的 AR 代码所在的位置，但索引是空的，所以这些文件没有链接，我不知道什么 javascript 会让它们如此.我什至不确定 .js 文件中的代码是否可以正常工作，因为我已从每个示例文件夹中获取文件并将它们合并到我的项目文件夹中。

现在，如果我尝试按原样启动模拟，我会从 www 文件夹中的 index.html 文件中获得标准 phonegap“设备就绪”屏幕。据我了解，目标上的功能 1.1 Image 应该将我的 www 索引与 World 索引连接起来，但如果我按原样添加它，它会给出一个无响应的链接（我期待一个空白页面，因为我的 World 索引是空的）。我在 Wikitude ARchitect v3.0 API Documentation中搜索了这个功能没有成功，不知道自己怎么设置。

在这一点上，我真的需要一些指导：我已经形象地阅读了他们所有的论坛（我几乎可以从字面上说），我已经多次阅读指南，并且我已经在他们的参考资料中搜索了示例中解释的功能，但没有成功（在指南的“javascript 界面”部分有对 AR 函数的描述，但没有关于如何构建和调用它们以及放置它们的位置的实际信息）。

对不起，文字墙，我真的希望你能就如何继续向我提供一些帮助。

非常感谢。

附：我正在使用带有 Eclipse 4.2.1 的 phonegap 3.3、Xcode 5.0.2、android 开发人员工具 v 22.3.0。在装有 OS 10.8.5 的 Mac Book pro 上工作

【问题讨论】：

我的文件夹图片链接：i60.tinypic.com/28sot1t.png 【参考方案1】：

这是一个简单的 index.js（与PhoneGap 应用程序相关），它加载与应用程序捆绑的 Architect World：

var app = 
// Application Constructor
initialize: function() 
    this.bindEvents();
,
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() 
    document.addEventListener('deviceready', this.onDeviceReady, false);
,
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() 
    app.receivedEvent('deviceready');

    app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");
    app.wikitudePlugin.isDeviceSupported(app.onDeviceSupportedCallback, app.onDeviceNotSupportedCallback);
,

onDeviceSupportedCallback: function() 

    app.wikitudePlugin._onARchitectWorldLaunchedCallback = app.onArchitectWorldLaunched;
    app.wikitudePlugin._onARchitectWorldFailedLaunchingCallback = app.onArchitectWorldFailedLaunching;


    app.wikitudePlugin.loadARchitectWorld('www/res/ARchitectWorld/SimpleCircle.html');

    app.wikitudePlugin.setOnUrlInvokeCallback(app.onURLInvoked);
,
onDeviceNotSupportedCallback: function() 
    alert('device not supported');
,
onArchitectWorldLaunched: function(url) 
    alert('launched ' + url);
,
onArchitectWorldFailedLaunching: function(error) 
    alert('error ' + error);
,
onURLInvoked: function(url) 

    // TODO: impl. url parsing to know what to do with the given url.

    app.wikitudePlugin.close();
,


// Update DOM on a Received Event
receivedEvent: function(id) 
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);

;

此代码主要检查当前设备是否能够运行 AR World，如果是，则启动一个 Architect World，它是您的应用程序包的一部分。这是一个简单的建筑师世界，它在特定位置显示一个圆圈。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Circle</title>

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>


<script>

function createCircle()

    AR.logger.activateDebugMode();


    var circle = new AR.Circle(2, style: fillColor: '#8F45FF');

    var drawableLocation = new AR.RelativeLocation(null, 10, 0);
    var geoObject = new AR.GeoObject(myGeoLocation, drawables: cam: circle);

    AR.logger.info("circle created");


function sendCloseARViewRequest()

    // hideButton?status=hide could be anything, you just have to know what to do with the url in the PhoneGap world.
    document.location = 'architectsdk://hideButton?status=hide';


</script>
</head>

<body>

<button value="Create ARchitectObj" type="button" onclick="createCircle()">Create Circle</button>

<button value="Close" type="button" onclick="sendCloseARViewRequest()">Close</button>


</body>
</html>

Wikitude SDK 包含 SDK 各个部分的大量文档（ObjC/Java 参考、JS 参考和描述 SDK 使用的一般文档。请参阅 Documentation.html 和参考/JavaScript 参考/index.html）。

当您创建一个新的 PhoneGap 项目时，添加 Wikitude 插件和您的自定义 Architect World，然后将代码添加到您的 index.js，您应该有一个具有 AR 功能的正在运行的应用程序。

【讨论】：

能否添加结果的屏幕截图？【参考方案2】：

随着上次更新，维基团队改进了基本指南http://www.wikitude.com/developer/documentation/phonegap 这个提供了额外的帮助：D 我已经根据示例构建了自己的 ar 应用程序，它似乎可以工作：D

【讨论】：

以上是关于无法使用 wikiitude 和 Phonegap 创建 AR 应用的主要内容，如果未能解决你的问题，请参考以下文章

Swift 3 中的 Wikiitude 实例

无法在 iPhone 应用上使用 PhoneGap 和 jQuery 获取 JSON 结果

iTunes 同步应用程序无法使用 Phonegap 安装

使用 Google 地图进行地理定位无法使用 PhoneGap

Phonegap PushPlugin 无法接收通知 ios

无法在 Windows phone 和 iOS 中安装 Phonegap 构建的应用程序