如何确保在Meteor中的其他文件之前加载Three.js？

Question

我正在使用Meteor 0.6.3和Meteorite。我正在尝试使用Meteor开发一款使用Meteor进行多人游戏的游戏。完整代码here。我尝试过使用Atmosphere软件包here，但我得到了：

  

ReferenceError：未定义THREE

我的解决方法是在模板文件的标题中包含Three.js。当我不调用Three.js函数直到客户端启动时，这种方法有效。当我尝试使用原型来定义我的盟友类时，我遇到了问题。我的代码如下：

var Enemy = function() {
 this.mesh = new THREE.Mesh();
};

var Enemy = function(){};
Enemy.prototype = new Entity();

这给出了一个错误，即没有定义THREE，即使代码工作正常如果写成：

var Entity = function() {
 this.mesh = new THREE.Mesh();
};

var Enemy = function() {
 this.mesh = new THREE.Mesh();
};

我希望能够使用这样的原型来管理具有相同基本接口的几种类型的实体。以下是我也尝试过的一些事情：

1. 基于the documentation，我尝试在project /，project / client /，project / client / compatability /和project / lib /中放置一个three.min.js.每次它都表示未定义THREE或Meteor崩溃。

2. 在我们称之为Three.js的html文件中定义这些原型。

为了澄清我的问题，我想知道是否有人可以建议如何构建我的文件，以便它将加载Three.js然后我的所有类型文件然后尝试在Meteor.startup（）中启动客户端。这是当前的文件结构：

project/model.js
project/server/server.js
project/client/game.css
project/client/game.html
project/client/game.js

如果有任何我应该提供的信息，请告诉我。我希望我不会过于严厉地屠杀任何关键词！

Answer 1

编辑：在较新的Meteor版本中，您可以将three.js放入客户端/兼容性中。见þăדᴚῖↄқ的答案。

---

Three.js不会将自身附加到全局窗口对象。相反，它只定义了一个变量THREE。

另一方面，Meteor为每个加载的文件创建一个范围，因此此脚本中定义的每个var都不是全局的。这就是为什么THREE不是全局可见的。

在three.js源文件的末尾添加window.THREE = THREE;解决了这个问题。

Answer 2

最后，在Meteor 1.3及更高版本中，NPM模块支持开箱即用。添加Three.js就像运行

一样简单

npm install three

在Meteor应用的根目录中，然后在您的代码中，在任何文件中，只需将其置于顶部：

import THREE from 'three'

那就是它！

Meteor 1.3仍然处于测试阶段，所以要尝试一下，你需要运行

meteor update --release METEOR@1.3-beta.12

在您的应用中。

Answer 3

在Meteor中，放置在/lib目录中的脚本会在其他所有内容之前加载。我建议从https://github.com/mrdoob/three.js/zipball/master抓取最新版本的Three.js并将其丢弃。

Answer 4

不要将THREE.js放入lib。把它放在client/compatibility中。

来自文档：

  

某些JavaScript库仅在放置在client / compatibility子目录中时才有效。执行此目录中的文件而不包装在新的变量范围中。这意味着每个顶级var都定义了一个全局变量。此外，这些文件在其他客户端JavaScript文件之前执行。

如其他答案中所述，您的问题是使用var定义变量会在模块的范围内创建一个本地变量，而不是整个项目。我不需要包含window.THREE = THREE;