A-Frame AR.js 应用无法识别我的标记图案，并且在加载页面时出现黑色覆盖

Question

这里是link：https://sixteendollars.github.io/

如您所见，单击 link 后，页面上出现了一个奇怪的黑色覆盖层。

此外，在将相机对准我的标记图像 (https://i.imgur.com/pwGnKIu.png) 时，它没有像预期那样识别标记并弹出 A-Frame 实体。我不确定这是标记、模型、我访问资产管道的方式还是什么问题。

HTML:

<!DOCTYPE html>
<html>

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>

<body style="margin : 0px; overflow: hidden;">

<a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false;">


    <a-marker type="pattern" url="assets/pattern-marker.patt">
        <a-entity             
        obj-model= "obj: url(assets/Batman.obj);
        mtl: url(assets/Batman.mtl)">></a-entity>
     </a-marker>
     <a-camera-static/>

</a-scene>

</body>

</html>

目录结构：

assets
    pattern-marker.patt
    Batman.obj
    Batman.mtl
index.html

Answer 1

我将您的代码放入此 codepen，它运行正常。不过有几个问题。

1) 始终确保场景在没有 ar.js

时的表现

模型很大（您需要将其缩小一百倍），并且“mtl”无法正常工作。您可以在 this fiddle.

中看到它

您可以使用 blender/maya 或使用 scale 组件将其缩小：

<a-entity scale='0.1 0.1 0.1'></a-entity>

2) 'overlay' 实际上是您的模型。 <a-marker-camera>应该作为场景的一个视角。如果你想在标记上放置 AR 东西，请使用 <a-marker>:

 <a-marker type="pattern" url="assets/pattern-marker.patt">
    <a-entity all-my-models></a-entity>
 </a-marker>
 <a-camera-static/>

<a-camera-static>相当于相机(source)

当标记消失时，<a-marker-camera> 确保渲染的模型留在屏幕上。所以你会看到加载模型的初始位置。

图片或未发生
当您缩小模型并将其放入 <a-marker> 中时，您应该会看到模型（右边的模型没有 mtls）

更新

这是一个非常具体的问题，所以我将其单独放置。

1) MTL。这些控制台错误表明您没有上传一些必要的文件

2) Github 页。在我的笔记本电脑上加载需要一段时间，但很明显。在 windows 上尝试过 firefox / chrome。

A-Frame AR.js 应用无法识别我的标记图案，并且在加载页面时出现黑色覆盖

A-Frame AR.js app isn't recognizing my marker pattern, and also a black overlay upon loading the page

html

javascript

augmented-reality

aframe

ar.js

更新