Your SlideShare is downloading. ×
0
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Tamabi media131118
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tamabi media131118

431

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
431
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング 2013年11月18日、 11月25日 多摩美術大学 情報デザイン学科メディア芸術コース 担当:田所淳
  • 2. 今日の内容 ‣ Three.js というJavaScriptのライブラリを使用して、Webブラ ウザ上で3Dプログラミングに挑戦します!
  • 3. Webブラウザで3Dグラフィクスを扱う
  • 4. WebGLについて ‣ Webブラウザ上で3Dグラフィクスを扱うには… ‣ WebGLという標準仕様が策定されている ‣ 非営利団体のKhronos Groupで管理 ‣ 公式サイト: http://www.khronos.org/webgl/
  • 5. WebGLについて ‣ ただし、WebGLで自由に3DCGのプログラミングするのは、か なり大変… ‣ 3D座標の操作のための様々な数学的な知識を前提とする ! ‣ そこで今回は、JavaScriptで容易に3Dを扱うことのできるライ ブラリを導入してみたい
  • 6. Three.js について
  • 7. Three.jsとは ‣ WebGL (とCanvas) を使用して高度な3D表現を可能とする、 Javascriptのライブラリ ‣ MITライセンスの、オープンソースプロジェクト ‣ Mr. Doobを中心に多くのコラボレーターと共に開発が現在も進 行中 ! ‣ ※ MITライセンス - ソフトウェアライセンスのひとつ ‣ ソフトウェアを誰でも無償で無制限に扱って良い。ただし、著 作権表示および本許諾表示をソフトウェアのすべての複製また は重要な部分に記載しなければならない。 ‣ 作者または著作権者は、ソフトウェアに関してなんら責任を負 わない。
  • 8. Three.js ‣ まずは、Three.jsのプロジェクトページをみてみる ‣ http://mrdoob.github.com/three.js/
  • 9. Three.js ‣ 様々な素晴しいサンプルがあるので、いくつか紹介
  • 10. jsdo.it でThree.jsを使うには ‣ jsdo.it には、あらかじめThree.jsが組込まれている! ‣ Three.jsを使用する際には、Javascriptのエディタで、Add Libraryボタンを押し、Three.jsを選択する
  • 11. Three.js を使ってみる!!
  • 12. Three.jsを使ってみる ‣ Three.jsでの3Dオブジェクト描画の考え方 ‣ シーン、カメラ、ライト、メッシュ(物体) ! ‣ 「シーンの中に物体(メッシュ)を配置して、ライティングした ものをカメラで撮影する」
  • 13. Three.jsを使ってみる ‣ Three.jsでの3Dオブジェクト描画の考え方 ‣ シーン、カメラ、ライト、メッシュ(物体) scene light camera mesh (= object)
  • 14. Three.jsを使ってみる ‣ 物体(mesh)は、材質(material)と形状(geometry)から成り立っ ている mesh (= object) = material 材質 + geometry 形状
  • 15. Three.jsを使ってみる ‣ テンプレートをfork ‣ 最低限の設定をしたテンプレートをjsdo.itにアップしました ‣ まずはこのプログラムをForkしてください ‣ http://jsdo.it/yoppa/d2ad
  • 16. Three.jsを使ってみる ‣ テンプレートには描画するコンテナの設定とWebGLのレンダラーの追加が行われている //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //コンテナとレンダラーの配置 var $container = $('#container'); var renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH, HEIGHT); $container.append(renderer.domElement);
  • 17. Three.jsを使ってみる ‣ まずは、WebGLのシーンを追加 ! // シーンの生成 var scene = new THREE.Scene();
  • 18. Three.jsを使ってみる ‣ 次に、カメラとライトの配置 ! // カメラ配置 var camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 1, 1000); camera.position.z = 300; ! // ライト配置 var light = new light.position.x = light.position.y = light.position.z = scene.add(light); THREE.DirectionalLight(0xffffff, 1.5); 0.5; 0.5; 1;
  • 19. Three.jsを使ってみる ‣ 立方体のジオメトリと、マテリアルを設定 ! // 立方体のジオメトリとマテリアル設定 var geometry = new THREE.CubeGeometry(100, 100, 100); var material = new THREE.MeshLambertMaterial({color: 0x336699});
  • 20. Three.jsを使ってみる ‣ 設定したジオメトリとマテリアルで、メッシュを生成 // メッシュ生成 var mesh = new THREE.Mesh(geometry, material);
  • 21. Three.jsを使ってみる ‣ メッシュを、回転 (横に-30°、縦に30°) // メッシュを回転 mesh.rotation.x = 30 * Math.PI / 180.0; mesh.rotation.y = -30 * Math.PI / 180.0;
  • 22. Three.jsを使ってみる ‣ メッシュをシーンに追加して、レンダラで描画 // メッシュをシーンに追加 scene.add(mesh); ! //シーンを描画する renderer.render(scene, camera);
  • 23. Three.jsを使ってみる ‣ 完成!! 光のあたった立方体が表示されるはず
  • 24. Three.jsを使ってみる ‣ このように、Three.jsでは、簡単に3Dの物体を表示することが できる ‣ 実際には高度な数学的な知識が必要な、3D座標の回転も簡単 ! ‣ では、マウスの位置によって回転角度を変化させてみる
  • 25. Three.jsを使ってみる ‣ メッシュの回転とシーンの追加、レンダリングの部分を変更 // メッシュ生成 var mesh = new THREE.Mesh(geometry, material); // メッシュをシーンに追加 scene.add(mesh); ! // マウスの位置でメッシュを回転 renderer.domElement.addEventListener('mousemove', function(e) { mesh.rotation.x = e.pageY/ 100.0; mesh.rotation.y = e.pageX/ 100.0; ! //シーンを描画する renderer.render(scene, camera); }, false);
  • 26. Three.jsを使ってみる ‣ マウスの位置で回転するようになったはず
  • 27. Three.jsを使ってみる ‣ 最後にテクスチャを貼ってみる ‣ まずはファイルをアップロード ‣ jsdo.it の Filesタブに画像をドラッグして、URLをコピーする
  • 28. Three.jsを使ってみる ‣ マテリアルの設定に、テクスチャを追加 // 立方体のジオメトリとマテリアル設定 var geometry = new THREE.CubeGeometry(100, 100, 100); // テクスチャを読み込み var texture = new THREE.ImageUtils.loadTexture('http://jsrun.it/assets/6/Q/A/m/ 6QAmH.jpg3'); // テクスチャを反映 var material = new THREE.MeshLambertMaterial({map: texture}); // メッシュ生成 var mesh = new THREE.Mesh(geometry, material); // メッシュをシーンに追加 scene.add(mesh);
  • 29. Three.jsを使ってみる ‣ テクスチャーが貼れた!!
  • 30. Three.jsを使用したアニメーション
  • 31. ここまでの復習 ‣ ここまでのプログラムについてこれていない方は、こちら から ‣ まず下記のURLのプログラムをFORK ‣ 手元のプログラムをみながら復習と補足 ! http://jsdo.it/yoppa/yN9x
  • 32. 前回の復習 ‣ Javascriptコード //立方体の表示: 基本 ! //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //コンテナとレンダラーの配置 var $container = $('#container'); var renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH, HEIGHT); $container.append(renderer.domElement); ! //立方体ジオメトリ var geometry = new THREE.CubeGeometry(100, 100, 100); //マテリアル var material = new THREE.MeshLambertMaterial({color: 0x3366cc}); //メッシュの生成 var mesh = new THREE.Mesh(geometry, material);
  • 33. 前回の復習 ‣ Javascriptコード //メッシュの回転 mesh.rotation = {x: 0.5, y: 0.5, z: 0.0}; ! //カメラを配置 var camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000); camera.position.z = 400; camera.lookAt(mesh.position); ! //シーンを生成し、メッシュ追加 var scene = new THREE.Scene(); scene.add(mesh); ! //ライト追加 var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position = {x: 0, y: 0.2, z: 1} scene.add(light); ! //レンダリング renderer.render(scene, camera);
  • 34. 前回の復習 ‣ 完成、(静止した)立方体が表示される
  • 35. Three.jsを使用したアニメーション ‣ Three.jsでアニメーションを実現するには ‣ プログラムをより構造化していく必要あり ! ‣ 準備 (初期設定) → 更新 (アニメーション) → 描画
  • 36. Three.jsを使用したアニメーション ‣ Three.jsでの構造化のイメージ init (初期化) animation (更新) ループ render (更新)
  • 37. Three.jsを使用したアニメーション ‣ Javascriptコードでのイメージ //画面設定、グローバルな変数の設定など ... ! //プログラム構造 init(); animate(); ! function init() { /* 初期化に関するコード */ } ! function animate() { /* 更新に関するコード */ render(); // レンダー呼び出し } ! function render() { renderer.render(scene, camera); //レンダリング }
  • 38. Three.jsを使用したアニメーション ‣ 先程作成した、立方体の描画のコードを、この構造にあてはめ ていく
  • 39. Three.jsを使用したアニメーション ‣ Javascript //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //Three.jsのシーンに関係するグローバルな変数 var mesh, scene, camera, renderer, light; ! //プログラム構造 init(); animate(); ! function init() { ! //コンテナとレンダラーの配置 var $container = $('#container'); renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH, HEIGHT); $container.append(renderer.domElement);
  • 40. Three.jsを使用したアニメーション ‣ Javascript //立方体ジオメトリ var geometry = new THREE.CubeGeometry(100, 100, 100); //マテリアル ! var material = new THREE.MeshLambertMaterial({color: 0x3366cc}); //ジオメトリとマテリアルから、メッシュの生成 mesh = new THREE.Mesh(geometry, material); mesh.rotation.x += 20 / 180.0 * Math.PI; //カメラを配置 camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000); camera.position.z = 400; camera.lookAt(mesh.position); //シーンを生成し、メッシュ追加 scene = new THREE.Scene(); scene.add(mesh); //ライト追加 light = new THREE.DirectionalLight(0xffffff, 1.5); light.position = {x: 0, y: 0.2, z: 1} scene.add(light); }
  • 41. Three.jsを使用したアニメーション ‣ Javascript ! //アニメーション function animate() { requestAnimationFrame( animate ); render(); } ! //レンダリング function render() { renderer.render(scene, camera); }
  • 42. Three.jsを使用したアニメーション ‣ まずは、静止した立方体が表示される(はず)
  • 43. Three.jsを使用したアニメーション ‣ この立方体を動かすには ‣ 変化させたいパラメータを、animateの中で演算する ! ‣ 位置、回転、サイズ、色 ...etc. ! ‣ では、試しに回転角度を変化させてみる
  • 44. Three.jsを使用したアニメーション ‣ Javascript //アニメーション function animate() { ! ! } mesh.rotation.y += 5 / 180.0 * Math.PI; requestAnimationFrame( animate ); render(); 追加
  • 45. Three.jsを使用したアニメーション ‣ 立方体が、ぐるぐる回転する!!
  • 46. Three.jsを使用したアニメーション ‣ 立方体のスケールも変更してみる ‣ sin関数と、cos関数で、幅と高さを別々に変形
  • 47. Three.jsを使用したアニメーション ‣ Javascript //アニメーション function animate() { mesh.rotation.y += 5 / 180.0 * Math.PI; ! ! } mesh.scale.x = 0.4 * Math.sin( Date.now() / 100.0) + 1.0; mesh.scale.y = 0.4 * Math.cos( Date.now() / 100.0) + 1.0; requestAnimationFrame( animate ); render();
  • 48. Three.jsを使用したアニメーション ‣ 立方体が、グニャグニャと変形
  • 49. 応用:たくさんの図形をアニメーション
  • 50. 応用:たくさんの図形をアニメーション ‣ たくさんの図形を同時に動かす ‣ 配列 (Array) とくりかえし (for) の使用法がポイント! ! ‣ すこしずつ、回転スピードと、伸縮スピードをずらしながら、 たくさんの立方体を描いてみる!!
  • 51. 応用:たくさんの図形をアニメーション ‣ Javascript //画面設定 var b = document.body; var d = document.documentElement; var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); ! //Three.jsのシーンに関係するグローバルな変数 var var var var var var ! scene, camera, renderer, light; mouseX = 0, mouseY = 0; windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; mesh = []; NUM = 100; //プログラム構造 init(); animate(); ! function init() { ! //コンテナとレンダラーの配置 var $container = $('#container');
  • 52. 応用:たくさんの図形をアニメーション ‣ Javascript //立方体ジオメトリ var geometry = new THREE.CubeGeometry(100, 100, 100); //マテリアル var material = new THREE.MeshLambertMaterial({color: 0x3366cc}); //くりかえし for(var i = 0; i < NUM; i++){ //ジオメトリとマテリアルから、メッシュの生成 mesh[i] = new THREE.Mesh(geometry, material); mesh[i].rotation.x += i / 180.0 * Math.PI; scene.add(mesh[i]); } //カメラを配置 camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000); camera.position.z = 400; camera.lookAt(mesh[0].position); //ライト追加 light = new THREE.DirectionalLight(0xffffff, 1.5); light.position = {x: 0, y: 0.2, z: 1} scene.add(light);
  • 53. 応用:たくさんの図形をアニメーション ‣ Javascript //アニメーション function animate() { //くりかえし for(var i = 0; i < NUM; i++){ mesh[i].rotation.y += i / 18000.0 * Math.PI; mesh[i].scale.x = 0.8 * Math.sin( i * Date.now() / 20000.0) + 1.0; mesh[i].scale.y = 0.8 * Math.cos( i * Date.now() / 30000.0) + 1.0; } requestAnimationFrame( animate ); render(); } ! //レンダリング function render() { ! //カメラの視点をマウスで移動 camera.position.x += ( mouseX - camera.position.x ); camera.position.y += ( - mouseY - camera.position.y ); camera.lookAt(mesh[0].position); //レンダリング renderer.render(scene, camera); }
  • 54. 応用:たくさんの図形をアニメーション ‣ 複雑に変形を繰り返す立方体の組み合わせ ‣ http://jsdo.it/yoppa/bmak
  • 55. 応用:たくさんの図形をアニメーション ‣ 今週はここまで!

×