Reputation: 13

Meteor.js can't reference Three.js

I'm trying to build an application with Meteor and Three.js but unfortunately pretty unsuccessful in binding the two parts together.

Three.js is a library for WebGL visualization on the client side; somehow I can't reference it correctly in Meteor.

Meteor either doesn't find it at all, if I place the .js in /public, or I get an error:

ReferenceError: self is not defined at app/Three.js:2:47

when I place it in any other folder.

I really have no idea why... Thanks!

Upvotes: 1

Answers (4)

Peter Derouen

Reputation: 3

After playing around with Meteor for a few days, I've learned that it's not necessary to always have a package for a library you want to use. I cannot say this solution works for everything, but it has allowed me to use three.js without any hackery.

Place your three.min.js file within client/compatibility and create a new file within the client folder called main.js Within your main.js file enter the following code:

Meteor.startup(function() {
    // your three code here.
});

And viola! This should work perfectly fine. I'm using three.js r71 and meteor v1.1.0.2

Upvotes: 0

Boon

Reputation: 105

I got the same problem. Eventually I realize someone had already package up Three.js in Atmosphere :

https://atmosphere.meteor.com/package/three.js

Just install meteorite and run

mrt add three.js

and that will add the three.js packages to your project. Solved !

Upvotes: 0

user2697497

Reputation: 11

All meteorite packages did not worked for me, so I did another approach. You can still write a meteor package. Or you can use your project structure by itself. In meteor documentation you can read this:

"Files in subdirectories are loaded before files in parent directories, so that files in the deepest subdirectory are loaded first (after lib), and files in the root directory are loaded last (other than main.*)."

So what I did was, I created a lib folder at the deepest subdirectory in my client folder and put my three.js file there. At the beginning of the file you can find the global definition:

var THREE = THREE || { REVISION: '60' };

After it, you need to add it to the window object like so:

window.THREE = THREE;

Thats it. Now you can use three.js and if you need some other libs from three.js, you just need to put them in a directory higher then your three.js.

(Sorry about my english, I know it is terrible)

Upvotes: 1