Easy publishing of npm modules three and three-math with nodejs export headers + footers.

[bhouston]

In order to utilize three and three-math easily in a nodejs environment, it is necessary to create node_modules packages. It is easiest if we automate the creation of these node_modules via a nodejs script that builds them via copying around the appropriate files and adding the required NodeJS header and footer to the scripts.

I will put these scripts in this folder:

• three.js/utils/npm

I will create a build.js script that will build the two node modules here:

• three.js/utils/npm/node_modules/three
• three.js/utils/npm/node_modules/three-math

The contents of each module will be an three.js or three-math.js file that is the main NodeJS export intended for the server (which will be added via concatenating header.js and footer.js). It will be the unminified version for easy debugging. The module will also contain a minified version that is intended to be used by the client (this is pretty standard module publishing method and inspired by underscore.js's module structure.) It will also include the standard three.js README.md and a package.json that is configured appropriately.

I will also create a local README.md in the three.js/utils/npm directory that contains instructions on how to build and publish the npm node_modules.

I have already registered the npm names "three" and "three-math" with initial published versions here:

• https://npmjs.org/package/three
• https://npmjs.org/package/three-math

My implementation of the npm module publishing infrastructure is in this directory of this branch:

https://github.com/bhouston/three.js/tree/npm/utils/npm

[mrdoob]

Sounds good to me (even if I'm a total ignorant about npm stuff).

[mrdoob]

Merged! ^^

[max-mapper]

@bhouston can you (or whoever is able to publish) publish r54 stable to npm? There seem to only be dev versions on there.

Also I noticed that if you have 2 modules that both require('three') you get weird bugs like scene.updateMatrixWorld() stops affecting things

[bhouston]

Hi Maxogden,

I've pushed 0.54.0 from three.js/master -- it is now up to date but npm often takes a few minutes to show it: https://npmjs.org/package/three

I will ensure that I publish the masters going forward.

The full details of how the npm module is created is in /three.js/util/npm

You can use that script to make one locally and then put it in your local node_modules to debug it.

If you can identify the error, just do a PR request.

It is working fine in our use case at the moment, but it is likely different than yours.

[dshoukim]

Has anyone made anything cool with this yet? I have been working on a project using node and three.js and thus far the only example I can find is Three Node, which doesn't use three as a node module.

[max-mapper]

all of the projects on http://voxeljs.com use three from NPM

On Mon, Jan 28, 2013 at 6:09 PM, Dan notifications@github.com wrote:

Has anyone made anything cool with this yet? I have been working on a project using node and three.js and thus far the only example I can find is Three Node http://www.idflood.com/node/40, which doesn't use three as a node module.

— Reply to this email directly or view it on GitHubhttps://github.com/mrdoob/three.js/issues/2796#issuecomment-12816954.

[jewelsjacobs]

Whats the difference between three and three-math?

Do I just install three-math or both?

Edit:

Never mind, I did a diff on the two and it looks like three-math is three+more math functions. So standalone three-math is OK.

[bhouston]

Three math is just the math library, if you need everything just require three, it includes three math.

Sent from my phone, sorry for my grammar and terseness. On Feb 7, 2013 5:46 PM, "jewelsjacobs" notifications@github.com wrote:

Whats the difference between three and three-math?

Do I just install three-math or both?

— Reply to this email directly or view it on GitHubhttps://github.com/mrdoob/three.js/issues/2796#issuecomment-13266651.

[jewelsjacobs]

First off I just want to qualify by saying I'm am a total newb with this AMD, asynchronous browser modules vs. node synchronous server modules thing so be gentile :). I could not find any examples of this either, so I tried to do my homework!

Has anyone used the three node module with any browser type / asynchronous modules / require.js modules?

I thought I'd use the three node module with the three.js dependent CSS3DRenderer.js, TrackballControls.js and a custom module I wrote running asynchronous as require.js modules.

My reasoning behind this is:

1) Use the node three module so it can rely on the server resources as apposed to the client PC / browser resources for it's heavy math functions (is this the advantage to using a three node module? Again I'm a newb!). 2) Use the control and CSS3D libraries as browser modules because they are so DOM dependent.

The problem is you can't use the require function, nor the define function to include node modules in browser type modules.

I'm thinking about using amdefine - https://github.com/jrburke/amdefine to convert CSS3DRenderer.js and TrackballControls.js into AMD and Require.js compatible modules. Then I can use the define to include them in my three.js, CSS3DRenderer.js and TrackballControls.js dependent require.js module.

Something like what this boilerplate / example is doing: https://github.com/NilsLattek/backbone-requirejs-node-boilerplate

Am I crazy? Does anyone have a good idea for this or should I just three.js as a front end library? Am I barking up the wrong tree? Am I being confusing? Am I asking this in the wrong place?

Help is much appreciated!

[bhouston]

Yes, I've used three.js with amdefine and require.js in all WebGL compatible browsers. Works great. :-)

[jewelsjacobs]

That's awesome!

I hate to snoop but do you have an example of this somewhere?

[bhouston]

Unfortunately no. :-/

[bhouston]

But it isn't that tricky, just put in the amdefine shims and you should be fine. Actually voxel.js uses three as a node module and they are using it with require, thus that is probably the place to see it in action:

http://voxeljs.com/

[jewelsjacobs]

Thanks for the info!

Just for future reference of anyone looking at this, unless I'm mistaken, it looks like voxeljs is using browserfy as opposed to require which also looks like a fine solution:

http://browserify.org/

Please correct me if I'm wrong :)

[evidenciavisual]

Hey guys, thanks for the effort, I'm diving into node.js as well, but I've found too tricky putting this package to work. Since the folder already contains some resources from the original github examples, Can anybody please share just a plain 'hello world'?. I just need to understand how to wire server and client together. Many thanks beforehand!

[bhouston]

http://Clara.io is running using the ThreeJS NPM module. For browser side, we do a post-process step on the ThreeJS minimized source to create a unique hashed file name, through it up on a CDN and then we use a custom multi-script loader in our main page which is like a simplified RequireJS -- I think you could just use RequireJS btw. We have a simpler setup for when running server side, we just use the standard NodeJS require() method.