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

（但我不认为这是引起问题的原因）然后，当我单击以扫描标记时，按钮起作用，后面的函数执行了，我重定向到了learninger.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（仅这两个learninger.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>

当我在learninger.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包含了脚本，但是我没有选项，我需要它们

当我在learninger.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上，只是在网站上从那里使用它们，就可以了。

如何使用标记区域学习

1 个答案: