初心者でもできる！ Three.js で、 Web サイトにインパクトを！

春の Javascript 祭！ 14.04.26

WebGL - JavaScript で実装する、 3D グラフィック -

1

小林由憲（こばやしよしのり）

Twitter: @AsbyuKobayashi

ブログ : In Advance Only

生まれは　奈良県　です。

2

Three.js は WebGL を少ないステップで実装できる JavaScript ライブラリ

公式サイト：　 http://threejs.org/

3

WebGL

・ウェブブラウザで 3 次元コンピュータグラフィックスを表示させるための標準仕様。

・技術的には、 JavaScript とネイティブのOpenGL ES 2.0 のバインディング。

　　　　　　　　　　　　　（ wikipedia より）

4

今回のサンプル

http://ticklecode.com/present/140426_js_spring_festival_threejs/

「月と地球」

5

render （レンダー）

sence （シーン） camera （カメラ）

6

sence （シーン）に必要なもの

① mesh （メッシュ）：物体のこと形状や色や素材を設定

② light （ライト）：光源の設定物体を照らす方向、距離

7

camera （カメラ）を設置する

カメラの種類、撮影位置を設定

8

render （レンダー）で動きをつける

アニメーションさせるための関数が用意されている。

function render(){

requestAnimationFrame(render); :

JavaScript の setInterval より高機能。1 秒間に 60 回描画する。

9

OrbitControls （オービットコントロール）

http://ticklecode.com/present/140426_js_spring_festival_threejs

マススで撮影角度を操作できる！物体の裏側などを自動で計算して描画してくれる！

実際にマススでクリックして、動かしてみる！

10

まとめ

Three.js を使えば少ないステップで 3D ができる。→ 手順が理解できれば、実装は早い。

JavaScript で実装できる。→ 他の Web コンテンツと融合できる。

円運動や回転運動には、力学の知識が必要。→ ググれば公式が出てくる。

OrbitControls.js は圧巻！ぜひ、使用すべき！

11