javascript - AR.JS 自定义标记

Question

我正在尝试为 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>

这在标记中的实现不正确吗？作为引用，我使用了一个非常简单的黑白圆形图像进行测试，但它仍然不起作用。是否需要编写一些其他代码来注册自定义标记模式？

Answer 1

我在这上面花了很长时间!最后发现这是几个问题。

<强>1。 preset="模式"

首先，如果您查看原始 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 .

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

React-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'
}}>