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

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とは
‣ WebGL (とCanvas) を使用して高度な3D表現を可能とする、
Javascriptのライブラリ
‣ MITライセンスの、オープンソースプロジェクト
‣ Mr. Doobを中心に多くのコラボレーターと共に開発が現在も進
行中
!

‣ ※ MITライセンス - ソフトウェアライセンスのひとつ
‣ ソフトウェアを誰でも無償で無制限に扱って良い。ただし、著
作権表示および本許諾表示をソフトウェアのすべての複製また
は重要な部分に記載しなければならない。
‣ 作者または著作権者は、ソフトウェアに関してなんら責任を負
わない。

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での3Dオブジェクト描画の考え方
‣ シーン、カメラ、ライト、メッシュ(物体)
!

‣ 「シーンの中に物体(メッシュ)を配置して、ライティングした
ものをカメラで撮影する」

‣ Three.jsでの3Dオブジェクト描画の考え方
‣ シーン、カメラ、ライト、メッシュ(物体)

scene
light

camera

mesh (= object)

‣ 物体(mesh)は、材質(material)と形状(geometry)から成り立っ
ている

mesh (= object)

=

material
材質

+

geometry
形状

‣ テンプレートをfork
‣ 最低限の設定をしたテンプレートをjsdo.itにアップしました
‣ まずはこのプログラムをForkしてください
‣ http://jsdo.it/yoppa/d2ad

‣ テンプレートには描画するコンテナの設定と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);

‣ まずは、WebGLのシーンを追加
!

// シーンの生成
var scene = new THREE.Scene();

‣ 次に、カメラとライトの配置
!

// カメラ配置
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;

‣ 立方体のジオメトリと、マテリアルを設定
!

// 立方体のジオメトリとマテリアル設定
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({color: 0x336699});

‣ 設定したジオメトリとマテリアルで、メッシュを生成
// メッシュ生成
var mesh = new THREE.Mesh(geometry, material);

‣ メッシュを、回転 (横に-30°、縦に30°)
// メッシュを回転
mesh.rotation.x = 30 * Math.PI / 180.0;
mesh.rotation.y = -30 * Math.PI / 180.0;

‣ メッシュをシーンに追加して、レンダラで描画
// メッシュをシーンに追加
scene.add(mesh);

!

//シーンを描画する
renderer.render(scene, camera);

‣ 完成!! 光のあたった立方体が表示されるはず

‣ このように、Three.jsでは、簡単に3Dの物体を表示することが
できる
‣ 実際には高度な数学的な知識が必要な、3D座標の回転も簡単
!

‣ では、マウスの位置によって回転角度を変化させてみる

‣ メッシュの回転とシーンの追加、レンダリングの部分を変更
scene.add(mesh);

!

// マウスの位置でメッシュを回転
renderer.domElement.addEventListener('mousemove', function(e) {
mesh.rotation.x = e.pageY/ 100.0;
mesh.rotation.y = e.pageX/ 100.0;

!

//シーンを描画する

}, false);

‣ マウスの位置で回転するようになったはず

‣ 最後にテクスチャを貼ってみる
‣ まずはファイルをアップロード
‣ jsdo.it の Filesタブに画像をドラッグして、URLをコピーする

‣ マテリアルの設定に、テクスチャを追加
// 立方体のジオメトリとマテリアル設定
// テクスチャを読み込み
var texture
= new THREE.ImageUtils.loadTexture('http://jsrun.it/assets/6/Q/A/m/
6QAmH.jpg3');
// テクスチャを反映
var material = new THREE.MeshLambertMaterial({map: texture});
scene.add(mesh);

‣ テクスチャーが貼れた!!

Three.jsを使用したアニメーション

ここまでの復習
‣ ここまでのプログラムについてこれていない方は、こちら
から
‣ まず下記のURLのプログラムをFORK
‣ 手元のプログラムをみながら復習と補足
!

http://jsdo.it/yoppa/yN9x

前回の復習
‣ Javascriptコード
//立方体の表示: 基本

!

//画面設定
d.clientWidth);
d.clientHeight);

!

var renderer = new THREE.WebGLRenderer();

!

//立方体ジオメトリ
//マテリアル
var material = new THREE.MeshLambertMaterial({color: 0x3366cc});
//メッシュの生成

前回の復習
‣ Javascriptコード
//メッシュの回転
mesh.rotation = {x: 0.5, y: 0.5, z: 0.0};

!

//カメラを配置
var camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000);
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);

!

//レンダリング

前回の復習
‣ 完成、(静止した)立方体が表示される

‣ Three.jsでアニメーションを実現するには
‣ プログラムをより構造化していく必要あり
!

‣ 準備 (初期設定) → 更新 (アニメーション) → 描画

‣ Three.jsでの構造化のイメージ

init (初期化)

animation (更新)
ループ

render (更新)

‣ Javascriptコードでのイメージ
//画面設定、グローバルな変数の設定など
...

!

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

!

function init() {
/* 初期化に関するコード */
}

!

function animate() {
/* 更新に関するコード */
render(); // レンダー呼び出し
}

!

function render() {
renderer.render(scene, camera); //レンダリング
}

‣ 先程作成した、立方体の描画のコードを、この構造にあてはめ
ていく

‣ Javascript
//画面設定
d.clientWidth);
d.clientHeight);

!

//Three.jsのシーンに関係するグローバルな変数
var mesh, scene, camera, renderer, light;

!

init();
animate();

!

function init() {

!

renderer = new THREE.WebGLRenderer();

‣ Javascript
//マテリアル

!

//ジオメトリとマテリアルから、メッシュの生成
mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x += 20 / 180.0 * Math.PI;
camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000);
camera.lookAt(mesh.position);
//シーンを生成し、メッシュ追加
scene
= new THREE.Scene();
scene.add(mesh);
//ライト追加
light
= new THREE.DirectionalLight(0xffffff, 1.5);
scene.add(light);

}

‣ Javascript
!

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

!

function render() {
}

‣ まずは、静止した立方体が表示される(はず)

‣ この立方体を動かすには
‣ 変化させたいパラメータを、animateの中で演算する
!

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

‣ では、試しに回転角度を変化させてみる

‣ Javascript

!
!

}

mesh.rotation.y += 5 / 180.0 * Math.PI;
render();

追加

‣ 立方体が、ぐるぐる回転する!!

‣ 立方体のスケールも変更してみる
‣ sin関数と、cos関数で、幅と高さを別々に変形

‣ Javascript
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;
render();

‣ 立方体が、グニャグニャと変形

応用：たくさんの図形をアニメーション

‣ たくさんの図形を同時に動かす
‣ 配列 (Array) とくりかえし (for) の使用法がポイント!
!

‣ すこしずつ、回転スピードと、伸縮スピードをずらしながら、
たくさんの立方体を描いてみる!!

‣ Javascript
//画面設定
d.clientWidth);
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() {

!


‣ Javascript
//マテリアル
//くりかえし
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.lookAt(mesh[0].position);
//ライト追加
light
= new THREE.DirectionalLight(0xffffff, 1.5);
scene.add(light);

‣ Javascript
//くりかえし
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;
}
render();
}

!

function render() {

!

//カメラの視点をマウスで移動
camera.position.x += ( mouseX - camera.position.x );
camera.position.y += ( - mouseY - camera.position.y );
camera.lookAt(mesh[0].position);

}

‣ 複雑に変形を繰り返す立方体の組み合わせ
‣ http://jsdo.it/yoppa/bmak

‣ 今週はここまで!

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

Semelhante a Webデザイン第10回：HTML5実践 Three.jsで3Dプログラミング (20)

Mais de Atsushi Tadokoro

Mais de Atsushi Tadokoro (20)