如何使用标记区域学习

Question

现在我正在使用Three.js，Aframe和AR.js。我正在学习Jerome的例子：

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页面比player.html少导入了3个脚本，两个页面上通用的脚本语法是相同的。

我注意到:如果我尝试在URL中没有选项的情况下访问网页，页面可以正常工作……这个页面给了我一些关于missins选项的输出，但是脚本已经加载，但是我需要这些选项:(

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

我使用的是NodeJS v4.2.6 & NPM v3.5.2 &Expressv4.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 (只有这两个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页面上时，网址是：

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页面上时，网址是：

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)

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

Answer 1

好的，我会在这里回答我的问题。

在发布了这个问题之后，我试着从EJS改回HTML，看看有没有什么不同，结果仍然是一样的。所以我选择了艰难的方式:总结一下，我在库中做了一些修改：

我保持了我访问文件的方式，例如:通过/learner &在URL中没有任何参数，，但我需要它们，所以我在web localStorage上移动了它们，并在网站部分使用它们，这很有效。