时间戳

首页 > 解决方案 > AR.JS 自定义标记

javascript - 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>

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

标签： javascriptjquerythree.jsaframear.js

解决方案

我在这上面花了很多年！最后发现这是几个问题。

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

推荐阅读