如何使用标记区域学习答案

【问题标题】：How to use marker area learn如何使用标记区域学习
【发布时间】：2019-06-28 05:45:18
【问题描述】：

现在我正在使用 Three.js 、 Aframe 和 AR.js 。我正在关注杰罗姆的例子：

https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/multi-markers/examples/player.html

我已将他的库包含在我的项目示例中，我正试图找出发生这种情况的原因：

当我在 player.html 页面上时，一切正常，控制台没有显示任何错误，只是一个警告：

 stop profile.trackingBackend() obsolete function. use .trackingMethod instead

（但我不认为这是导致问题的原因）然后，当我点击扫描标记时，按钮起作用，后面的函数执行，我被重定向到 learner.html 网页，但所有导入脚本都收到 400 错误代码并且没有加载到网站上，所以没有任何工作.

我做了什么：我通过在线工具逐行检查脚本，复制粘贴尝试。它们是相同的，当我说相同时，我的意思是 learner.html 页面导入的脚本比导入的少 3 个player.html ，两个页面的常用脚本语法相同。

我注意到：如果我尝试在没有 URL 中的选项的情况下访问该网页，则该页面运行良好……嗯，该页面为我提供了一些关于 Missins 选项的输出，但脚本已加载，但我需要选项:(

脚本导入的问题我认为这是由 URL 网页中包含的那个对象引起的，这很奇怪，因为它还在播放器网页中添加了一些其他的东西并且它正在工作。

我正在使用 NodeJS v4.2.6 & NPM v3.5.2 & Express v4.16.4 这就是我在 NodeJS 中处理这两个页面的请求的方式：

app.get('/multiMarkers4', function (req, res) {
  res.render( pathView + 'player.ejs', { pageName:"player", errorMsg:"" });
});

app.get('/learner', function (req, res) {
  res.render( pathView + 'learner.ejs', { pageName:"learner", errorMsg:"" });
});

是的，我已经将文件从 html 更改为 ejs 并将它们移到 /views 中（只有这 2 个 learner.ejs 和 player.ejs ）对于脚本，我在 Node 中创建了一些特定路径：

app.use('/three', express.static(__dirname + '/three.js'));

learner.ejs 和 player.ejs 网页的代码与 Jerome 的 GitHub 存储库中的代码几乎相同，唯一修改的是导入脚本：

这是在 player.ejs 中，它正在工作

<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>

<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>

<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>

<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>

<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>

<script src='/three/examples/multi-markers/examples/threex-screenasportal/threex-screenasportal.js'></script>
<script>THREEx.ScreenAsPortal.baseURL = 'threex-screenasportal/';</script>

当我在 player.ejs 页面上时，URL 是：

https://x.y.z/multiMarkers4#%7B"trackingBackend"%3A"artoolkit"%7D

当我在 player.ejs 页面上时，devTools 中的控制台日志是：

THREE.WebGLRenderer 86
threex-artoolkitprofile.js:145 stop profile.trackingBackend() obsolete function. use .trackingMethod instead
ARjs.Profile.trackingBackend @ threex-artoolkitprofile.js:145(This is that warning,the rest of the output is just simple output)
artoolkit.min.js:1 Allocated videoFrameSize 1228800
artoolkit.min.js:1 Pattern detection mode set to 1.
artoolkit.min.js:1 Pattern ratio size set to 0.500000.

这是在 learner.ejs 中，它在没有 URL 选项的情况下工作：

<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>

<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>

<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>

<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>

<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>

当我在 learner.ejs 页面上时，URL 是：

https://x.y.z/learner?%7B"backURL"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4%23%257B%2522trackingBackend%2522%253A%2522artoolkit%2522%257D"%2C"trackingBackend"%3A"artoolkit"%2C"markersControlsParameters"%3A%5B%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fhiro.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fkanji.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fa.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fb.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fc.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Ff.patt"%7D%5D%7D

正如我所说，https://x.y.z/learner 包含脚本，但我没有选项，我需要它们

当我在 learner.ejs 页面上时，devTools 中的控制台日志对所有脚本都有来自服务器的 400 响应：

Failed to load resource: the server responded with a status of 400 (Bad Request)

如何导入这些脚本并保留选项，以便能够了解标记区域？

【问题讨论】：

嗨@PiotrAdamMilewski，感谢您的帮助，但恐怕这不是我需要的。我已经读过这个问题，但这不是我想要的，那个问题的目标不是标记区域。标记区域如下所示：twitter.com/jerome_etienne/status/860549893089374208
哦，那我误会了，对不起！

标签： javascript node.js three.js augmented-reality aframe

【解决方案1】：

好的，我会把问题的答案放在这里。

发布此问题后，我尝试从 EJS 更改回 HTML，看看是否有任何区别，结果仍然相同。所以我选择了艰难的方式：我在库中做了一些改变，总结一下：

我保留了访问文件的方式，例如：通过 /learner & 在 URL 中没有任何参数，但我需要它们，所以我将它们移动到网络 localStorage 和只是在网站部分从那里使用它们并且有效。

【讨论】：