YEOMAN Advent Calendar 1日目：generator-threejs を紹介します

いつもデモでお世話になっている generator-threejs を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月1日の記事です。

YEOMAN Advent Calendar 2014 - Adventar

threejsとはJavaScriptでWebGLを利用するライブラリの一つです。数行で3Dが楽しめますので是非お楽しみください。HTML5 Experts.jpでも人気の記事がありますので読まれることをおすすめします：

初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ | HTML5Experts.jp

three.js - Javascript 3D library

インストール及び実行

インストールから実行までは次の通りです

$ npm install -g generator-threejs
$ mkdir threejs && cd $_
$ yo threejs
$ grunt serve

ブラウザが起動され3D図がぐるぐる回転しますが、一部修正します。

    renderer = new THREE.CanvasRenderer();

を

    if (window.WebGLRenderingContext) {
        renderer = new THREE.WebGLRenderer();
    } else {
        renderer = new THREE.CanvasRenderer();
    };

としたほうが良いかなと思います。この２つの違いはthreejsのサイトによると次の通りです。WebGLRendererの方が綺麗に描画されます。

CanvasRenderer: The Canvas renderer displays your beautifully crafted scenes not using WebGL, but draws it using the (slower) Canvas 2D Context API. WebGLRenderer: The WebGL renderer displays your beautifully crafted scenes using WebGL, if your device supports it.

最後に

generator-threejs を使うとささっと Threejs を使い WebGL を利用する土台ができあがります。ここから試行錯誤で色々ためしてみるのも良いかと思います。今日から「YEOMAN Advent Calendar 2014」が始まりますが担当分に関しては、よく使うジェネレータの紹介をしていきます。よろしくお願いいたします。