AR.JS自定义标记

时间:2018-04-27 14:56:59

标签: javascript jquery three.js aframe ar.js

我试图为AR.JS使用自定义标记。但是,按照创建自定义标记的说明然后更改标记预设后,它仍然无法正常工作。关于如何正确实施的任何想法?

<a-marker preset="custom" type="pattern" url="img/pattern-marker.patt">
   <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box>
 </a-marker>

这在标记中是不正确的实现?作为参考,我使用了一个非常简单的黑白圆形图像来测试它仍然无法正常工作。是否需要编写其他代码来注册自定义标记模式?

1 个答案:

答案 0 :(得分:2)

我已经花了很多年的时间!最后发现这是一个问题。

<强> 1。预设=&#34;模式&#34;

首先,如果您查看原始js脚本:https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js,您会注意到preset="custom"中没有else if。例如,搜索else if( _this.data.preset === 'kanji' ){

但是有一个preset="pattern"。所以在你的例子中,替换:

<a-marker preset="custom" type="pattern" url="img/pattern-marker.patt"> <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box> </a-marker>

<a-marker preset="pattern" type="pattern" url="img/pattern-marker.patt"> <a-box position='0 0.5 0' material='color: black;' soundhandler></a-box> </a-marker>

<强> 2。将.patt上传到您的GitHub,以便它可以解析文件

其次,我的.patt并未在本地获取,因此url="img/pattern-marker.patt"无法正常工作。将此.patt文件推送到GitHub,然后使用raw.githubusercontent引用它。

示例

您可以使用我的模式进行测试。 https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt

标记的图像如下: https://github.com/lbelfield/augmented-reality/blob/master/src/components/trainTicket/train-ticket.png

<强>阵营的Web-AR: 这不适用于你,但如果有人像我一样使用React-Web-AR,请使用:

<Marker parameters={{ preset: 'pattern', type: 'pattern', patternUrl: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt', url: 'https://raw.githubusercontent.com/lbelfield/augmented-reality/master/src/components/trainTicket/train-ticket.patt' }}>