How can I make sure that Tr.js is loaded before other files in Meteor?

Question

I am using Meteor 0.6.3 with a meteorite. I am trying to develop a game using Three.js which uses Meteor for a multiplayer game. Full code here . I tried using the Atmosphere package here , but I get:

ReferenceError: THREE undefined

My workaround was to include Three.js in the header of my template file. This works when I do not call Three.js functions before starting the client. I ran into a problem when I tried to use a prototype to determine the class of my ally. I had code like:

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

This gives an error that THREE is not detected, although the code works fine if it is written as:

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

I would like to use prototypes like this to manage several types of objects that will have the same basic interfaces. Here are some things I also tried:

• Based on the documentation , I tried to place the three.min.js project in project /, project / client /, project / client / compatability / and project / lib /. Every time he either says THREE is undefined, or Meteor crashes.

• The definition of these prototypes in the html file, where we call Three.js.

To clarify my question, I am wondering if anyone can suggest how to structure my files so that it loads Three.js and then all my type files, and then try to run the client in Meteor.startup (). Here is the current file structure:

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

Please let me know if there is more information that I must provide. Hope I'm not overlooking any keywords!

Answer 1

Edit: In new versions of Meteor, you can put three.js in client / compatibility. See Answer þă דᴚ ῖↄқ.

---

Three.js does not bind to the global window object. Instead, it only defines var THREE.

Meteor, on the other hand, creates an area for each uploaded file, so every var defined in this script is not global. That is why THREE is not displayed globally.

Adding window.THREE = THREE; to the end of the source file three.js solves this problem.

Answer 2

Finally, in Meteor 1.3 and later, NPMs are supported in the finished form. Adding Three.js is as easy as running

 npm install three 

in the root of your Meteor application, then in your code in any file just put this at the top:

 import THREE from 'three' 

what is it!

Meteor 1.3 is in beta, so to try it you need to run

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

in your application.

Answer 3

In Meteor, scripts placed in the /lib directory are loaded with everything else. I would recommend grabbing the latest version of Three.js from https://github.com/mrdoob/three.js/zipball/master and drop it there.

Answer 4

Do not put THREE.js in lib. Put it in client/compatibility .

From the docs:

Some JavaScript libraries work only when placed in a client / compatible subdirectory. Files in this directory are executed without transferring to a new area of ​​the variable. This means that each top level var defines a global variable. In addition, these files are executed in front of other client-side JavaScript files.

Your problem, as pointed out in other answers, is that defining a variable with var creates a local variable for the module scope, not for the whole project. I did not need to include window.THREE = THREE;