• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Three.jsで3D気分
 

Three.jsで3D気分

on

  • 4,758 views

「HTML5+α @福岡」第18回のLTです。

「HTML5+α @福岡」第18回のLTです。

Statistics

Views

Total Views
4,758
Views on SlideShare
4,757
Embed Views
1

Actions

Likes
8
Downloads
22
Comments
0

1 Embed 1

https://www.chatwork.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Three.jsで3D気分 Three.jsで3D気分 Presentation Transcript

  • Three.jsで3D気分 3D素人でもちょっぴり操作できそう! HTML5 勉強会@福岡 - 第18回 2012.10.5(金)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 描画する場所(2次元)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" > <!-- ☆ 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の種類 実は、4種類あるみたいですけど 今回のデモは、なんとなく点光源を選んでます。 環境光 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日日曜日