いつもデモでお世話になっている 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(); };
としたほうが良いかなと思います。この2つの違いは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」が始まりますが担当分に関しては、よく使うジェネレータの紹介をしていきます。よろしくお願いいたします。