Movatterモバイル変換

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.html12年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次元空間 camara カメラの目線 light 照明 mesh 物 2) renderer canvasに3Dを描画する機能 3) canvas 描画する場所（２次元）12年10月7日日曜日

よくわかりません。。なので、ひとつひとつ見て行きましょう。12年10月7日日曜日

scene Scene(シーン)は、3次元空間を生成し照明や物、カメラを配置できます。劇の舞台、htmlのbodyみたいな感じでしょうか。12年10月7日日曜日

renderer rendererは2次元のcanvasに3次元を描画します。 html div renderer canvas が描くよ ※犬の絵は、http://e-poket.com/illust/を使用しています。12年10月7日日曜日

canvas canvasはhtml5のcanvasです。 3D描画用としてThree.jsがdivの中に生成します。 html div canvas Three.jsが divの生成準備が必要！12年10月7日日曜日

続いて sceneに配置する物を説明します。12年10月7日日曜日

camera レンダラーに描いて欲しい目線を教えます。カメラの画角, 縦横比, クリッピング手前,クリッピング奥、位置などを変更すると色々な描画になります。画角とか？用語がむずかしいですね。。12年10月7日日曜日

camera補足-画角画角（視野角）とはここ数字が大きい程広い範囲が見えますすばらしい参考ブログ：http://www.yomotsu.net/wp/?p=59712年10月7日日曜日

camera補足-クリッピングクリッピングとはこの範囲内が描画対象手前奥無限に手前や奥を描画する訳ではないみたいですね。すばらしい参考ブログ：http://www.yomotsu.net/wp/?p=59712年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" >  </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.SpotLight12年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/p112年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日日曜日

Movatterモバイル変換

Change Language

Three.jsで3D気分

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Three.jsで3D気分

More from Toshio Ehara

Three.jsで3D気分

Editor's Notes