Embed Size (px)
DESCRIPTION
「HTML5＋α @福岡」第18回のLTです。
Citation preview
Three.jsで3D気分３D素人でもちょっぴり操作できそう！
HTML5 勉強会@福岡 - 第18回
２０１２．１０．５（金）
12年10月7日日曜日
自己紹介
下請けプログラマの江原と言います。
twitter：itokami1123 です。
JavaScriptとObjective-Cが好きです。HTML5やiOSの案件がありましたら是非仕事ください。
本日お話します3Dについては知ったかぶりですので間違ってたらビシビシ（優しく）指摘お願いしますね。
12年10月7日日曜日
HTML5で3D?HTML5にはブラウザでスムーズに
3D表示可能なWebGLがつきました。
ちょっと見てみましょう↓
http://alteredqualia.com/three/examples/webgl_cars.html
12年10月7日日曜日
すごいですね！
12年10月7日日曜日
しかし残念な事にスマートフォンでは、ほぼ使えない状況です。http://mobilehtml5.org/
でも来年には使える状況になる可能性があります。
今覚えておけばいつか仕事に困らないかも！
12年10月7日日曜日
WebGLはむずい？
ところが．．．．．難しい．．．
私のようなOpenGLは使った事がない人にはとても扱いが難しいものです。
しかし、なんとか3D表示してみたいなぁと思う訳です。
12年10月7日日曜日
Three.js
そこで「Three.js」を使います。
DOMを便利に操作するjQueryのように
WebGLを扱うライブラリです！
12年10月7日日曜日
手に入れよう！https://github.com/mrdoob/three.js/
ライブラリは、githubから
buildにライブラリが入っています。
12年10月7日日曜日
ざっくり仕組み1) scene 仮想3次元空間仮想3次元空間1) scene
camara カメラの目線
1) scene
light 照明
1) scene
mesh 物
2) renderer canvasに3Dを描画する機能canvasに3Dを描画する機能
3) canvas 描画する場所（２次元）描画する場所（２次元）
12年10月7日日曜日
よくわかりません。。
なので、ひとつひとつ見て行きましょう。
12年10月7日日曜日
scene
Scene(シーン)は、3次元空間を生成し照明や物、カメラを配置できます。劇の舞台、htmlのbodyみたいな感じでしょうか。
12年10月7日日曜日
rendererrendererは2次元のcanvasに3次元を描画します。
htmldiv
canvasrendererが描くよ
※犬の絵は、http://e-poket.com/illust/を使用しています。
12年10月7日日曜日
canvasはhtml5のcanvasです。
3D描画用としてThree.jsがdivの中に生成します。
canvas
htmldiv canvas Three.jsが
生成divの準備が必要！
12年10月7日日曜日
続いて
sceneに配置する物を説明します。
12年10月7日日曜日
cameraレンダラーに描いて欲しい目線を教えます。
カメラの 画角, 縦横比, クリッピング手前,クリッピング奥、位置などを変更すると色々な描画になります。
画角とか？用語がむずかしいですね。。
12年10月7日日曜日
camera補足-画角画角（視野角）とは
すばらしい参考ブログ：http://www.yomotsu.net/wp/?p=597
ここ
数字が大きい程広い範囲が見えます
12年10月7日日曜日
camera補足-クリッピングクリッピングとは
すばらしい参考ブログ：http://www.yomotsu.net/wp/?p=597
この範囲内が描画対象
無限に手前や奥を描画する訳ではないみたいですね。
手前奥
12年10月7日日曜日
lightシーンの中に光を灯す照明です。
位置や明るさを変える事が出来ます。
12年10月7日日曜日
mesh
sceneに配置するオブジェクトです。
構造を表すgeometory
素材を表すmaterial
+ =
mesh!
12年10月7日日曜日
それでは実際にコーディングしてみましょう！
12年10月7日日曜日
htmlの作成
1. ライブラリを配置します。<script type="text/javascript" src="js/Three.min.js" ></script>
2. divを用意します。<div id="threeJsPane" ><!-- ☆ Three.jsがここに描画するよ☆ -->
</div>
12年10月7日日曜日
sceneの書き方
下のように描けば3D空間が生成されます。var scene = new THREE.Scene();
12年10月7日日曜日
lightの書き方
光の色と強さを指定してlightオブジェクトを作ります。var light = new THREE.PointLight( 色, 強さ );
光源の位置を指定します。light.position.set( x座標, y座標, z座標 );
シーンに加えます。scene.add(this.light);
12年10月7日日曜日
lightの種類実は、４種類あるみたいですけど今回のデモは、なんとなく点光源を選んでます。
環境光 THREE.AmbientLight
平行光源 (無限遠光源) THREE.DirectionalLight
点光源 THREE.PointLight
スポットライト THREE.SpotLight
12年10月7日日曜日
cameraの書き方
色々指定してcameraオブジェクトを作ります。var camera = new THREE.PerspectiveCamera( 画角,縦横比, クリッピング手前, クリッピング奥 );
カメラの座標を指定しますcamera.position.set( X座標, Y座標, Z座標 );
12年10月7日日曜日
cameraの書き方
カメラの頭の向きを決めます。どれかを1にしてその他を0にします。camera.up.set ( up_x, up_y, up_z );
カメラが見つめる座標を指定します。camera.lookAt( { x:0 , y:0 , z:0 });
12年10月7日日曜日
rendererの書き方レンダラーオブジェクトを生成します。var renderer = new THREE.WebGLRenderer({antialias:true});
レンダラーが描く絵の横・縦幅を指定します。※div要素と同じで良いと思います。renderer.setSize( 横幅 , 縦幅 );
レンダラーが描く絵の背景の色を指定します。renderer.setClearColorHex( 色 , 透明度 );
描画先のdiv要素に追加して完成です！$(div要素).append( $(renderer.domElement) );
12年10月7日日曜日
rendererの描き方レンダラーの描画は以下のようにループさせます。
var animationLoop = function(){ // ☆描画！！ renderer.render( scene, camera );
requestAnimationFrame( animationLoop );
}
animationLoop();
12年10月7日日曜日
rendererの動かし方requestAnimationFrameって何？？
setIntervalでも出来るのですけどブラウザが裏に回っている時は、動作しない為、こちらを使った方が負荷が軽そうです。
※1秒間に60回描画するみたいです。
参考URL http://d.hatena.ne.jp/calpo/20110523/p1
12年10月7日日曜日
ここまでを動かしてみましょう。
デモURL:http://www.itokami1123.com/Three/20121005/
12年10月7日日曜日
なにも出ません！
なんも物を置いてないからです。
12年10月7日日曜日
meshの書き方 箱
箱の構造を作成します。var gemetry = new THREE.CubeGeometry( 幅, 高さ,
奥行き );
つづいて箱の表面の素材を作ります。（下の例は光を反射する素材です）var material = new THREE.MeshLambertMaterial({ color: 色 });
12年10月7日日曜日
meshの書き方 箱合体すると箱メッシュになります。var box = new THREE.Mesh( gemetry, material );
箱の座標を指定します。box.position.set( x, y, z );
シーンに箱を登場させます。this.scene.add(this.box );
どんな箱が出来るか確認してみましょう。デモURL:http://www.itokami1123.com/Three/20121005/
BOX_OFFボタンを押す
12年10月7日日曜日
meshの書き方 板
地面が無いと寂しいので板を作って地面にしましょう。
板の構造を生成
var geometry = new THREE.PlaneGeometry(幅,高さ);
地面の表面に今回は 画像(jpeg)を使ってみます。var material = new THREE.MeshBasicMaterial({ map:THREE.ImageUtils.loadTexture('xxxx.jpg') });
12年10月7日日曜日
meshの書き方 板
合体して地面の出来上がりvar floor = new THREE.Mesh( geometry, material ); シーンに登場させましょうscene.add( floor );
デモURL:http://www.itokami1123.com/Three/20121005/
FLOOR_OFFボタンを押す
12年10月7日日曜日
meshの書き方 モデルデータblenderで描いたモデルデータを変換してシーンに登場させることができます。まず、blenderに設定が必要です。
ダウンロードしたライブラリの以下をmrdoob-three.js-ef5f05d/utils/exporters/blender/2.63/scripts/addons
Blenderの中に貼付けます。./Contents/MacOS/2.63/scripts/addons※2.63を使っています。
12年10月7日日曜日
meshの書き方 モデルデータ
blenderのデータは↓を使わせてもらいました。ありがとうございます。http://blog.romatica.com/tag/three-js/
12年10月7日日曜日
meshの書き方 モデルデータFile->Export->Three.jsで出力出来ます。
※ 手順が悪いのか。。何故かoctcat2.pngが無いエラーが出ますので octcat.pngをリネームして使いました。
12年10月7日日曜日
meshの書き方 モデルデータ
このデータを読み込むにはJSONLoaderオブジェクトを生成します。var loader = new THREE.JSONLoader();
データの取得元とロード後によばれる関数を用意します。loader.load( "modelData.js", ロード後呼ばれる関数);
12年10月7日日曜日
meshの書き方 モデルデータ
ロード後に、よばれる関数を用意します。var loadCallBack = function( geometry ){ // geometoryが引数でくるのがポイントです！
var material = new THREE.MeshFaceMaterial(); var mesh = new THREE.Mesh(geometry,material); // モデルデータを配置すると小さい（大きい時）は // 以下で大きさを調整できます。 mesh.scale.set( x座標 , y座標 , z座標 );
12年10月7日日曜日
meshの書き方 モデルデータロード後よばれる関数を用意します。var loadCallBack = function( geometry ){ ・・つづき・・ // 箱と同様に位置を設定します
mash.position.set( 0, 0, 25 );
// シーンに登場させましょう！ scene.add( mesh );}
それでは見てみましょう。デモURL:http://www.itokami1123.com/Three/20121005/
OCTCAT_OFFボタンを押す
12年10月7日日曜日
今日の内容はココまでです！
12年10月7日日曜日
最後まで聞いてくれてありがとうございました！
12年10月7日日曜日
![WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]](https://img.pdfslide.tips/doc/110x75/54bd61454a79595e238b45bc/webgl-threejs-code-lab-intro-gtug-girls-10th.jpg)
