是否可以使用自定义标记？

Posted 2023-02-27

【中文标题】是否可以使用自定义标记？

【英文标题】：Is it possible to use custom markers?

【发布时间】：2018-01-30 21:21:15

【问题描述】：

是否可以使用与下面的“Hiro”标记不同的定制标记。我可以使用随机形状（例如纯红色椭圆形）作为标记吗？

如果目前不支持此功能，有人可以指出我可能开始构建此功能的正确方向吗？

【问题讨论】：

确保您的标记 PNG 文件不包含任何透明度。 .patt 生成的文件不会正常，并且不会检测到您的打印标记。

【参考方案1】：

AR.js 支持自定义标记。 使用marker generator 制作任何愚蠢的图像。

让 ar.js 知道你想使用你的标记：

<a-marker type="pattern" url="patterns/mypattern.patt">
      <a-entity myobject></a-entity>
</a-marker>

瞧。您可以使用this 图像在此glitch 中查看它。

【讨论】：

这仍然是最新的吗？因为它似乎对我不起作用。

@Blinxen 上次我检查时，ar.js 中有一个错误，并在这里找到了解决方案github.com/jeromeetienne/AR.js/issues/…。我会把它添加到 anwser

我克隆了 ar.js 主分支并对文件进行了更改，但是当我打开 html 时，我在一些随机行上收到两个文件的引用错误。它只是显示一个空白页。

@Blinxen 我会在 3 小时后试一试

好的，但是请克隆master分支，所以我们有相同的git repo并尝试一下。谢谢。

【参考方案2】：

1.预设=“模式”

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

但是有一个preset="pattern"。所以忽略文档并设置preset="pattern" 例如：

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

【讨论】：

+1 更彻底:)。最近的版本肯定有一些变化，因为它就像我一开始描述的那样工作（你不需要preset="pattern" ）

【参考方案3】：

第 1 步：首先，访问this page 制作自定义标记

第 2 步：将下载的图案（来自上述链接）放到您的根目录或上传到您的服务器

第 3 步：复制粘贴以下代码

 <a-scene embedded arjs='sourceType: webcam;'>
    <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
    <a-marker-camera preset='custom' type='pattern' url='PATH_TO_DOWNLOADED_PATTERN'></a-marker-camera>
    <a-entity myobject></a-entity>
    </a-marker>
</a-scene>