初心者でもできるthree.jsで、webサイトにインパクトを!webgl -...
DESCRIPTION
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で3Dが実装できるので、他のサイトコンテンツと融合させることができて、今後の可能性を感じる分野。 Three.jsの手順は下記のとおり。 1.sence(シーン)で舞台のようなものを作成 →mesh(メッシュ)で、物体の材料や形を指定する。 →light(ライト)で、光源の位置や距離を指定 物体が複数あれば、そのだけ指定必要。 2.camera(カメラ)で撮影位置や撮影方法を指定 →ここで、物体の移動は物体自体をアニメさせる方法と、カメラの位置を変えていく方法がある。 3.render(レンダー)で描画方法 →HTML5のcanvasを使って描画する。 requestAnimationFrameという、タイマー機能があるので、これで1秒間に60回ぐらい描画させてあげる。 ※感想みたいなもの かなり、リアルな3Dが描画できる。 毎回、手順は同じなので、覚えてしまえばかなり高速に制作できる。 物体の動きや、移動、回転などの計算はキモ。 光のあたり具合でかなり、リアルになる。TRANSCRIPT
初心者でもできる! 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