我在这上面花了很多年!最后发现这是几个问题。
1.预设=“模式”
首先,如果您查看原始 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
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'
}}>