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

【问题标题】：How can I make sure Three.js is loaded before other files in Meteor?如何确保在 Meteor 中的其他文件之前加载 Three.js？
【发布时间】：2013-05-28 13:50:22
【问题描述】：

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

ReferenceError: 三个未定义

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

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

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

这给出了一个没有定义三的错误，即使代码写成这样也可以正常工作：

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

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

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

基于the documentation，我尝试在project/、project/client/、project/client/compatability/和project/lib/中放置一个three.min.js。每次它要么说 THREE 未定义，要么 Meteor 崩溃。
在我们调用 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

如果我需要提供更多信息，请告诉我。我希望我没有把任何关键字杀得太糟糕！

【问题讨论】：

尝试 var THREE = require('three');

标签： javascript three.js meteor

【解决方案1】：

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

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

另一方面，Meteor 为每个加载的文件创建一个作用域，所以这个脚本中定义的每个 var 都不是全局的。这就是为什么 THREE 不是全局可见的。

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

【讨论】：

【解决方案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

在您的应用中。

【讨论】：

【解决方案3】：

在 Meteor 中，放置在 /lib 目录中的脚本首先加载。我建议从https://github.com/mrdoob/three.js/zipball/master 获取最新版本的 Three.js 并将其放入其中。

【讨论】：

谢谢，但我已经做到了！这就是我所说的“project/lib/”，其中 project 只是项目文件夹。当我这样做时，我得到了这个：“ReferenceError: self is not defined at app/Three.js”

【解决方案4】：

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

来自文档：

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

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

【讨论】：