3D Boilerplate

The code here just shows a 3D spinning cube in your web-browser. This repo is meant to be used to start small 3D projects with strong workflow / architecture.

Global dependencies

Node

You need Node.js environment to use this project. We will now install global node packages. Don't forget to sudo if you are on Unix / Mac.

Grunt

We use the grunt task runner to compile our sources and clean the workflow. After node is installed on your computer, you can install grunt as a globally available package with :

npm install -g grunt
npm install -g grunt-cli

Typescript

The source code is in Typescript. This will provide us strong auto-completion in most IDE, and a lot of static error checking. Most widely used javascript libraries have typescript definitions available to get auto-completion and error checking. Don't forget to update them from time to time. To install the compiler and it's definition manager globally :

npm install -g typescript
npm install -g tsd

Bower

We use bower as javascript dependency manager. Most of javascript libraries are available.

npm install -g bower

Project dependencies

Unix / Mac users, in most cases you need to exit your sudo session.

Grunt dependencies

To install local grunt dependencies, call the following command in the build/ folder.

npm install

Typescript definitions

To install used typescript definitions, call this in the `build/ folder :

tsd query waa --action install
tsd query mediastream --action install
tsd query three --action install
tsd query greensock --action install

We use three.js framework to abstract our 3D scenes and display them with WebGL. (waa and mediastream are webgl sub-dependencies). We also use the tween engine gsap from greensock for animations.

Bower

We use bower to install our dependencies. They are installed in the lib/ folder. To install bower dependencies, call this in the `build/ folder :

bower install

Run the project

To run the project, use this command in the build/ folder : This command will compile typescript sources + concat them in one file. When done this will launch a web-server (from the deploy/ folder) and watch changed files to re-run the compiling and reload the browser if needed.

grunt

If you just need compiling (no watching, no server) :

grunt dev

Or if you need production compiling (with sources obfuscation) :

grunt dist

That's it! Have fun :)