2014年4月26日　「春のJavascript祭り」で、LTした際のスライド。 Three.jsを使用して作品を作ってみました。 http://ticklecode.com/present/140426_js_spring_festival_threejs/ WebGLという技術分野で、3次元の考え方が必要ということもあり、なかなかに難しかったですが、慣れてしまえば、毎回、同じ手順で、実装できてしまいます。 ブラウザの対応状況ですが、IEは、11.0 から、Safariは、7.0から対応可。 スマホに至っては、全滅・・・。 http://caniuse.com/#search=webgl 物体の動きを考えるには力学の知識が必要になり、そのあたりの理解も必要になります。 Three.jsを使って、JavaScriptで３Dが実装できるので、他のサイトコンテンツと融合させることができて、今後の可能性を感じる分野。 Three.jsの手順は下記のとおり。 １．sence（シーン）で舞台のようなものを作成 →mesh（メッシュ）で、物体の材料や形を指定する。 →light（ライト）で、光源の位置や距離を指定 物体が複数あれば、そのだけ指定必要。 ２．camera（カメラ）で撮影位置や撮影方法を指定 →ここで、物体の移動は物体自体をアニメさせる方法と、カメラの位置を変えていく方法がある。 ３．render（レンダー）で描画方法 →HTML5のcanvasを使って描画する。 requestAnimationFrameという、タイマー機能があるので、これで1秒間に60回ぐらい描画させてあげる。 ※感想みたいなもの かなり、リアルな3Dが描画できる。 毎回、手順は同じなので、覚えてしまえばかなり高速に制作できる。 物体の動きや、移動、回転などの計算はキモ。 光のあたり具合でかなり、リアルになる。

1. 初心者でもできる！Three.jsで、Webサイトにインパクトを！
春のJavascript祭！14.04.26
WebGL - JavaScriptで実装する、3Dグラフィック -
1

2. 小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
生まれは 奈良県 です。
2

3. Three.js はWebGLを少ないステップで
実装できるJavaScriptライブラリ
公式サイト： http://threejs.org/
3

4. WebGL
・ウェブブラウザで3次元コンピュータグラフィックスを表示
させるための標準仕様。
・技術的には、JavaScriptとネイティブのOpenGL ES 2.0
のバインディング。
（wikipediaより）
4

5. 今回のサンプル
http://ticklecode.com/present/140426_js_sprin
g_festival_threejs/
「月と地球」
5

6. render（レンダー）
sence（シーン） camera（カメラ）
6

7. sence（シーン）に必要なもの
① mesh（メッシュ）：物体のこと
形状や色や素材を設定
② light（ライト）：光源の設定
物体を照らす方向、距離
7

8. camera（カメラ）を設置する
カメラの種類、撮影位置を設定
8

9. render（レンダー）で動きをつける
アニメーションさせるための関数が用意されている。
function render(){
requestAnimationFrame(render);
:
JavaScriptの setInterval より高機能。
1秒間に60回描画する。
9

10. OrbitControls（オービットコントロール）
http://ticklecode.com/present/140426_js_spring_fest
ival_threejs
マススで撮影角度を操作できる！
物体の裏側などを自動で計算して描画してくれる！
実際にマススでクリックして、動かしてみる！
10

11. まとめ
Three.jsを使えば少ないステップで3Dができる。
→手順が理解できれば、実装は早い。
JavaScriptで実装できる。
→他のWebコンテンツと融合できる。
円運動や回転運動には、力学の知識が必要。
→ググれば公式が出てくる。
OrbitControls.js は圧巻！ぜひ、使用すべき！
11