Webデザイン
第10回:HTML5実践
Three.jsで3Dプログラミング
2013年11月18日、 11月25日
多摩美術大学 情報デザイン学科メディア芸術コース
担当:田所淳
今日の内容
‣ Three.js というJavaScriptのライブラリを使用して、Webブラ
ウザ上で3Dプログラミングに挑戦します!
Webブラウザで3Dグラフィクスを扱う
WebGLについて
‣ Webブラウザ上で3Dグラフィクスを扱うには…
‣ WebGLという標準仕様が策定されている
‣ 非営利団体のKhronos Groupで管理
‣ 公式サイト: http://www.khronos.org/webgl/
WebGLについて
‣ ただし、WebGLで自由に3DCGのプログラミングするのは、か
なり大変…
‣ 3D座標の操作のための様々な数学的な知識を前提とする
!

‣ そこで今回は、JavaScriptで容易に3Dを扱うことのできるライ
ブラリ...
Three.js について
Three.jsとは
‣ WebGL (とCanvas) を使用して高度な3D表現を可能とする、
Javascriptのライブラリ
‣ MITライセンスの、オープンソースプロジェクト
‣ Mr. Doobを中心に多くのコラボレーターと共に開発が...
Three.js
‣ まずは、Three.jsのプロジェクトページをみてみる
‣ http://mrdoob.github.com/three.js/
Three.js
‣ 様々な素晴しいサンプルがあるので、いくつか紹介
jsdo.it でThree.jsを使うには
‣ jsdo.it には、あらかじめThree.jsが組込まれている!
‣ Three.jsを使用する際には、Javascriptのエディタで、Add
Libraryボタンを押し、Three.jsを...
Three.js を使ってみる!!
Three.jsを使ってみる
‣ Three.jsでの3Dオブジェクト描画の考え方
‣ シーン、カメラ、ライト、メッシュ(物体)
!

‣ 「シーンの中に物体(メッシュ)を配置して、ライティングした
ものをカメラで撮影する」
Three.jsを使ってみる
‣ Three.jsでの3Dオブジェクト描画の考え方
‣ シーン、カメラ、ライト、メッシュ(物体)

scene
light

camera

mesh (= object)
Three.jsを使ってみる
‣ 物体(mesh)は、材質(material)と形状(geometry)から成り立っ
ている

mesh (= object)

=

material
材質

+

geometry
形状
Three.jsを使ってみる
‣ テンプレートをfork
‣ 最低限の設定をしたテンプレートをjsdo.itにアップしました
‣ まずはこのプログラムをForkしてください
‣ http://jsdo.it/yoppa/d2ad
Three.jsを使ってみる
‣ テンプレートには描画するコンテナの設定とWebGLのレンダラーの追加が行われている
//画面設定
var b = document.body;
var d = document.documentElement;...
Three.jsを使ってみる
‣ まずは、WebGLのシーンを追加
!

// シーンの生成
var scene = new THREE.Scene();
Three.jsを使ってみる
‣ 次に、カメラとライトの配置
!

// カメラ配置
var camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 1, 1000);
camera.pos...
Three.jsを使ってみる
‣ 立方体のジオメトリと、マテリアルを設定
!

// 立方体のジオメトリとマテリアル設定
var geometry = new THREE.CubeGeometry(100, 100, 100);
var mat...
Three.jsを使ってみる
‣ 設定したジオメトリとマテリアルで、メッシュを生成
// メッシュ生成
var mesh = new THREE.Mesh(geometry, material);
Three.jsを使ってみる
‣ メッシュを、回転 (横に-30°、縦に30°)
// メッシュを回転
mesh.rotation.x = 30 * Math.PI / 180.0;
mesh.rotation.y = -30 * Math.P...
Three.jsを使ってみる
‣ メッシュをシーンに追加して、レンダラで描画
// メッシュをシーンに追加
scene.add(mesh);

!

//シーンを描画する
renderer.render(scene, camera);
Three.jsを使ってみる
‣ 完成!! 光のあたった立方体が表示されるはず
Three.jsを使ってみる
‣ このように、Three.jsでは、簡単に3Dの物体を表示することが
できる
‣ 実際には高度な数学的な知識が必要な、3D座標の回転も簡単
!

‣ では、マウスの位置によって回転角度を変化させてみる
Three.jsを使ってみる
‣ メッシュの回転とシーンの追加、レンダリングの部分を変更
// メッシュ生成
var mesh = new THREE.Mesh(geometry, material);
// メッシュをシーンに追加
scene...
Three.jsを使ってみる
‣ マウスの位置で回転するようになったはず
Three.jsを使ってみる
‣ 最後にテクスチャを貼ってみる
‣ まずはファイルをアップロード
‣ jsdo.it の Filesタブに画像をドラッグして、URLをコピーする
Three.jsを使ってみる
‣ マテリアルの設定に、テクスチャを追加
// 立方体のジオメトリとマテリアル設定
var geometry = new THREE.CubeGeometry(100, 100, 100);
// テクスチャを読み...
Three.jsを使ってみる
‣ テクスチャーが貼れた!!
Three.jsを使用したアニメーション
ここまでの復習
‣ ここまでのプログラムについてこれていない方は、こちら
から
‣ まず下記のURLのプログラムをFORK
‣ 手元のプログラムをみながら復習と補足
!

http://jsdo.it/yoppa/yN9x
前回の復習
‣ Javascriptコード
//立方体の表示: 基本

!

//画面設定
var b = document.body;
var d = document.documentElement;
var WIDTH = Math.ma...
前回の復習
‣ Javascriptコード
//メッシュの回転
mesh.rotation = {x: 0.5, y: 0.5, z: 0.0};

!

//カメラを配置
var camera = new THREE.PerspectiveC...
前回の復習
‣ 完成、(静止した)立方体が表示される
Three.jsを使用したアニメーション
‣ Three.jsでアニメーションを実現するには
‣ プログラムをより構造化していく必要あり
!

‣ 準備 (初期設定) → 更新 (アニメーション) → 描画
Three.jsを使用したアニメーション
‣ Three.jsでの構造化のイメージ

init (初期化)

animation (更新)
ループ

render (更新)
Three.jsを使用したアニメーション
‣ Javascriptコードでのイメージ
//画面設定、グローバルな変数の設定など
...

!

//プログラム構造
init();
animate();

!

function init() {...
Three.jsを使用したアニメーション
‣ 先程作成した、立方体の描画のコードを、この構造にあてはめ
ていく
Three.jsを使用したアニメーション
‣ Javascript
//画面設定
var b = document.body;
var d = document.documentElement;
var WIDTH = Math.max(b.c...
Three.jsを使用したアニメーション
‣ Javascript
//立方体ジオメトリ
var geometry = new THREE.CubeGeometry(100, 100, 100);
//マテリアル

!

var materia...
Three.jsを使用したアニメーション
‣ Javascript
!

//アニメーション
function animate() {
requestAnimationFrame( animate );
render();
}

!

//レン...
Three.jsを使用したアニメーション
‣ まずは、静止した立方体が表示される(はず)
Three.jsを使用したアニメーション
‣ この立方体を動かすには
‣ 変化させたいパラメータを、animateの中で演算する
!

‣ 位置、回転、サイズ、色 ...etc.
!

‣ では、試しに回転角度を変化させてみる
Three.jsを使用したアニメーション
‣ Javascript
//アニメーション
function animate() {

!
!

}

mesh.rotation.y += 5 / 180.0 * Math.PI;
requestA...
Three.jsを使用したアニメーション
‣ 立方体が、ぐるぐる回転する!!
Three.jsを使用したアニメーション
‣ 立方体のスケールも変更してみる
‣ sin関数と、cos関数で、幅と高さを別々に変形
Three.jsを使用したアニメーション
‣ Javascript
//アニメーション
function animate() {
mesh.rotation.y += 5 / 180.0 * Math.PI;

!
!

}

mesh.sca...
Three.jsを使用したアニメーション
‣ 立方体が、グニャグニャと変形
応用:たくさんの図形をアニメーション
応用:たくさんの図形をアニメーション
‣ たくさんの図形を同時に動かす
‣ 配列 (Array) とくりかえし (for) の使用法がポイント!
!

‣ すこしずつ、回転スピードと、伸縮スピードをずらしながら、
たくさんの立方体を描いてみる!...
応用:たくさんの図形をアニメーション
‣ Javascript
//画面設定
var b = document.body;
var d = document.documentElement;
var WIDTH = Math.max(b.cli...
応用:たくさんの図形をアニメーション
‣ Javascript
//立方体ジオメトリ
var geometry = new THREE.CubeGeometry(100, 100, 100);
//マテリアル
var material = ne...
応用:たくさんの図形をアニメーション
‣ Javascript
//アニメーション
function animate() {
//くりかえし
for(var i = 0; i < NUM; i++){
mesh[i].rotation.y +=...
応用:たくさんの図形をアニメーション
‣ 複雑に変形を繰り返す立方体の組み合わせ
‣ http://jsdo.it/yoppa/bmak
応用:たくさんの図形をアニメーション
‣ 今週はここまで!
Upcoming SlideShare
Loading in...5
×

Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング

4,597

Published on

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,597
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
22
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング

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

    Clipping is a handy way to collect important slides you want to go back to later.

×