Question

好的，所以我有一个流星应用程序，我正在尝试制作包含THREEjs动画的模板，这样我就可以通过加载特定的模板来加载特定的动画。我想通过取出脚本标记并将它们移动到单独的JavaScript文件来解除我的HTML文件的混乱，但这并不起作用。我最终只是将JavaScript放入我的HTML中并且它有效。我将继续这样做，并使用杂乱的代码生活，但现在我遇到了一个问题。

由于某些奇怪的原因，即使for循环在脚本标记内，计算机也会看到<符号，并期望有一个html标记。起初我以为我忘记了一个结束标签或者其他东西，但我检查过，我没有。如果我删除for循环（只创建一个粒子），一切都会再次完美。我可以通过使用<符号（<）的转义字符来解决这个问题，但我认为我应该找到解决这个首要问题的解决方案，以便将来我不会遇到类似的问题。

我想尽可能少地在我的HTML文件中添加JavaScript。（流星不喜欢它，我不喜欢它。）

如果我尝试将JavaScript复制并粘贴到单独的文件中，则无法找到min.three.js文件（它告诉我三个未定义）

我不想使用像require.js这样的另一个框架，主要是因为我不确定如何，但如果这是唯一的方法，我将作为最后的手段

THREEjs的所有示例都将代码直接放在HTML文件中，但是如何将其放入单独的javascript文件中并确保javascript文件找到min.three.js？

这是模板的外观概述。我使用jQuery查找actualAnimation2并将容器附加到其中。您还可以找到所有代码here

<template name = "animation2">
  <div id = "animation2" class = "centered">
    <div class = "line"></div>
      <h1>Animation 2</h1>
    <div class = "line"></div>
    {{> animationButtons}}
    <!--Put in a threejs animation here -->
    <div id = "actualAnimation2" class = "animation">
      <script src="client/three.min.js"></script>
      <script>
        //THREEjs stuff here
        //This is what I want to move
      </script>
    </div>
  </div>
</template>

tl;博士：我怎样才能让THREEjs与Meteor合作？

欢迎任何建议，如果我能澄清任何事情，请告诉我。谢谢你的帮助！

Answer 1

引用http://docs.meteor.com/：

某些JavaScript库仅在放入时才有效客户端/兼容性子目录。该目录中的文件是执行时没有包装在新的变量范围内。这意味着每个顶级var定义一个全局变量。另外，这些文件在其他客户端JavaScript文件之前执行。

这正是three.min.js需要做的事情，因为文件的开头看起来像：

// threejs.org/license
'use strict';var THREE={REVISION:"68"};

因此，您需要将three.min.js放入cient/compatibility/。

但是你可能最好不要使用软件包，请在几周左右的时间内仔细选择那些更有可能快速升级到修订版69的软件包。

Answer 2

如果我尝试将JavaScript复制并粘贴到单独的文件中，则无法找到min.three.js文件（它告诉我三个未定义）

听起来你遇到了在min.three.js之前加载JS文件的问题。您可以通过利用Meteor的JS加载顺序来解决这个问题 - 首先加载名为lib的目录中的文件，因此如果将min.three.js文件放在/client/lib中它将在该目录之外的源文件之前加载。

另一种选择是使用包 - 例如meteor add aralun:three。

如何将THREEjs代码放入带有meteor的独立JS文件中

2 个答案: