Zero to nyancat in 30 seconds flat

or Yeoman For Three.js

Our Goal link

First The Tools

What Is Three.js

What Is Yeoman ?

Why Using Yeoman ?

go deeper about yeoman

grunt for automating tasks

Bower For Packaging

Our Usage

Yo For Scafolding

Our Usage

Installing yeoman

sudo npm install -g yo

Installing three.js Generator

usefull to install three.js boilerplate

sudo npm install -g generator-threejs-boilerplate

Now The Action!

Project Directory

create it

mkdir yourthreejsproject

go in

cd yourthreejsproject

Generate Three.js Boilerplate

yo threejs-boilerplate

Try Three.js Boilerplate

make server then goto

Cool But Rather empty...

Let's Add NyanCat!


Wait! threex ?

What is threex ?

A Bit On Threex

threex and yeoman

All Optional

Back To NyanCat...

Install It With Bower

bower install threex.nyancat

Now it is in bower_components/threex.nyancat/

Rather Easy...

Now Let's add Nyan Cat

Step 1 Include the script

<script src='bower_components/threex.nyancat/threex.nyancat.js'>

Step 2 Add some javascript

var nyanCat    = new THREEx.NyanCat()
scene.add( nyanCat.container )

Step 3 And now, the model is in the scene.

Well Almost.. Just The Tail :)

One Last Step

Lets remove the cube...


Enougth now...

Packing It Up

Generate Three.js Boilerplate

yo threejs-boilerplate

Install threex extension for three.js

bower install threex.nyancat

Simple Enougth :)

Usefull Links