SlideShare a Scribd company logo
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を中心に多くのコラボレーターと共に開発が現在も進
行中
!

‣ ※ 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を使ってみる
‣ 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;
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);
Three.jsを使ってみる
‣ まずは、WebGLのシーンを追加
!

// シーンの生成
var scene = new THREE.Scene();
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;
Three.jsを使ってみる
‣ 立方体のジオメトリと、マテリアルを設定
!

// 立方体のジオメトリとマテリアル設定
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({color: 0x336699});
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.PI / 180.0;
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.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);
Three.jsを使ってみる
‣ マウスの位置で回転するようになったはず
Three.jsを使ってみる
‣ 最後にテクスチャを貼ってみる
‣ まずはファイルをアップロード
‣ jsdo.it の Filesタブに画像をドラッグして、URLをコピーする
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);
Three.jsを使ってみる
‣ テクスチャーが貼れた!!
Three.jsを使用したアニメーション
ここまでの復習
‣ ここまでのプログラムについてこれていない方は、こちら
から
‣ まず下記のURLのプログラムをFORK
‣ 手元のプログラムをみながら復習と補足
!

http://jsdo.it/yoppa/yN9x
前回の復習
‣ 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);
前回の復習
‣ 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);
前回の復習
‣ 完成、(静止した)立方体が表示される
Three.jsを使用したアニメーション
‣ Three.jsでアニメーションを実現するには
‣ プログラムをより構造化していく必要あり
!

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

init (初期化)

animation (更新)
ループ

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

!

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

!

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

!

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

!

function render() {
renderer.render(scene, camera); //レンダリング
}
Three.jsを使用したアニメーション
‣ 先程作成した、立方体の描画のコードを、この構造にあてはめ
ていく
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);
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);

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

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

!

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

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

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

!
!

}

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

追加
Three.jsを使用したアニメーション
‣ 立方体が、ぐるぐる回転する!!
Three.jsを使用したアニメーション
‣ 立方体のスケールも変更してみる
‣ sin関数と、cos関数で、幅と高さを別々に変形
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();
Three.jsを使用したアニメーション
‣ 立方体が、グニャグニャと変形
応用:たくさんの図形をアニメーション
応用:たくさんの図形をアニメーション
‣ たくさんの図形を同時に動かす
‣ 配列 (Array) とくりかえし (for) の使用法がポイント!
!

‣ すこしずつ、回転スピードと、伸縮スピードをずらしながら、
たくさんの立方体を描いてみる!!
応用:たくさんの図形をアニメーション
‣ 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');
応用:たくさんの図形をアニメーション
‣ 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);
応用:たくさんの図形をアニメーション
‣ 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);

}
応用:たくさんの図形をアニメーション
‣ 複雑に変形を繰り返す立方体の組み合わせ
‣ http://jsdo.it/yoppa/bmak
応用:たくさんの図形をアニメーション
‣ 今週はここまで!

More Related Content

What's hot

いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
 
Multi-Tenancy Kafka cluster for LINE services with 250 billion daily messages
Multi-Tenancy Kafka cluster for LINE services with 250 billion daily messagesMulti-Tenancy Kafka cluster for LINE services with 250 billion daily messages
Multi-Tenancy Kafka cluster for LINE services with 250 billion daily messages
LINE Corporation
 
DI(依存性注入)について
DI(依存性注入)についてDI(依存性注入)について
DI(依存性注入)について
Yui Ito
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
 
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
Masahito Zembutsu
 
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
GREE/Art
 
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
光晶 上原
 
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
Kazumi IWANAGA
 
Go mobileでモバイルアプリを作ろう
Go mobileでモバイルアプリを作ろうGo mobileでモバイルアプリを作ろう
Go mobileでモバイルアプリを作ろう
Takuya Ueda
 
Tech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみた
Tech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみたTech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみた
Tech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみた
Masaru Takahashi
 
Redisの特徴と活用方法について
Redisの特徴と活用方法についてRedisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
 
TDPT + VMCプロトコル on WebRTC
TDPT + VMCプロトコル on WebRTCTDPT + VMCプロトコル on WebRTC
TDPT + VMCプロトコル on WebRTC
hironroinakae
 
MagicOnion入門
MagicOnion入門MagicOnion入門
MagicOnion入門
torisoup
 
非同期処理の基礎
非同期処理の基礎非同期処理の基礎
非同期処理の基礎
信之 岩永
 
困らない程度のJDK入門
困らない程度のJDK入門困らない程度のJDK入門
困らない程度のJDK入門
Yohei Oda
 
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
 
絵を読む技術 Pythonによるイラスト解析
絵を読む技術 Pythonによるイラスト解析絵を読む技術 Pythonによるイラスト解析
絵を読む技術 Pythonによるイラスト解析
Hirosaji
 
Multibranch pipelineでいろいろ学んだこと
Multibranch pipelineでいろいろ学んだことMultibranch pipelineでいろいろ学んだこと
Multibranch pipelineでいろいろ学んだこと
Recruit Lifestyle Co., Ltd.
 
Photon Fusionのはじめの一歩
Photon Fusionのはじめの一歩Photon Fusionのはじめの一歩
Photon Fusionのはじめの一歩
聡 大久保
 
Flyway使いたい
Flyway使いたいFlyway使いたい
Flyway使いたい
fourside
 

What's hot (20)

いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
 
Multi-Tenancy Kafka cluster for LINE services with 250 billion daily messages
Multi-Tenancy Kafka cluster for LINE services with 250 billion daily messagesMulti-Tenancy Kafka cluster for LINE services with 250 billion daily messages
Multi-Tenancy Kafka cluster for LINE services with 250 billion daily messages
 
DI(依存性注入)について
DI(依存性注入)についてDI(依存性注入)について
DI(依存性注入)について
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」コンテナの作り方「Dockerは裏方で何をしているのか?」
コンテナの作り方「Dockerは裏方で何をしているのか?」
 
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
 
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
 
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
 
Go mobileでモバイルアプリを作ろう
Go mobileでモバイルアプリを作ろうGo mobileでモバイルアプリを作ろう
Go mobileでモバイルアプリを作ろう
 
Tech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみた
Tech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみたTech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみた
Tech Summit 2018 【事例紹介】 自社サービスに Azure IoT Hub Device Provisioning Serviceを適用してみた
 
Redisの特徴と活用方法について
Redisの特徴と活用方法についてRedisの特徴と活用方法について
Redisの特徴と活用方法について
 
TDPT + VMCプロトコル on WebRTC
TDPT + VMCプロトコル on WebRTCTDPT + VMCプロトコル on WebRTC
TDPT + VMCプロトコル on WebRTC
 
MagicOnion入門
MagicOnion入門MagicOnion入門
MagicOnion入門
 
非同期処理の基礎
非同期処理の基礎非同期処理の基礎
非同期処理の基礎
 
困らない程度のJDK入門
困らない程度のJDK入門困らない程度のJDK入門
困らない程度のJDK入門
 
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
 
絵を読む技術 Pythonによるイラスト解析
絵を読む技術 Pythonによるイラスト解析絵を読む技術 Pythonによるイラスト解析
絵を読む技術 Pythonによるイラスト解析
 
Multibranch pipelineでいろいろ学んだこと
Multibranch pipelineでいろいろ学んだことMultibranch pipelineでいろいろ学んだこと
Multibranch pipelineでいろいろ学んだこと
 
Photon Fusionのはじめの一歩
Photon Fusionのはじめの一歩Photon Fusionのはじめの一歩
Photon Fusionのはじめの一歩
 
Flyway使いたい
Flyway使いたいFlyway使いたい
Flyway使いたい
 

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

3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
yomotsu
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
 
Arctic.js
Arctic.jsArctic.js
Arctic.js
chikathreesix
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
Daisuke Imai
 
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいAngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
Yosuke Onoue
 
マーブル図で怖くないRxJS
マーブル図で怖くないRxJSマーブル図で怖くないRxJS
マーブル図で怖くないRxJS
bitbank, Inc. Tokyo, Japan
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda
 
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
Fujio Kojima
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Atsushi Tadokoro
 
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたWASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
MITSUNARI Shigeo
 
電子国土Part2
電子国土Part2電子国土Part2
電子国土Part2
Inoshachu, NPO
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
Yosuke Onoue
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
 
Css3講座
Css3講座Css3講座
Css3講座
SeiyaH
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
 

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

3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
Arctic.js
Arctic.jsArctic.js
Arctic.js
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
 
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいAngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
 
マーブル図で怖くないRxJS
マーブル図で怖くないRxJSマーブル図で怖くないRxJS
マーブル図で怖くないRxJS
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
 
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたWASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
 
電子国土Part2
電子国土Part2電子国土Part2
電子国土Part2
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
 
Css3講座
Css3講座Css3講座
Css3講座
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 

More from Atsushi Tadokoro

「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
 
coma Creators session vol.2
coma Creators session vol.2coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Atsushi Tadokoro
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Atsushi Tadokoro
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Atsushi Tadokoro
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
 
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Atsushi Tadokoro
 

More from Atsushi Tadokoro (20)

「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
 
coma Creators session vol.2
coma Creators session vol.2coma Creators session vol.2
coma Creators session vol.2
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
 
Tamabi media131118
Tamabi media131118Tamabi media131118
Tamabi media131118
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
 
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
 

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