WebGLのJSライブラリー「Three.js」を使ってみた

カテゴリーから探す

年別から見る

2013/07/24

WebGLのJSライブラリー「Three.js」を使ってみた

WebGLのJSライブラリー「Three.js」を使ってみた

前回のブログでご紹介したWebGLのJSライブラリーである「Three.js」を実際に使ってみました。

使い方は、こちらのサイト→（多彩な表現力のWebGLを扱いやすくする「Three.js」）を参考にさせていただきました。

↓こちらがデモです(Google Chromeでの閲覧推奨)。

※Safariで見る場合は、「Safari」→「環境設定」→「詳細」で「メニューバーに”開発”メニューを表示」のチェックボックスにチェックを入れ、「開発」→で「WebGLを有効にする」にチェックを入れます。

方法
まずはこちら(Three.js公式サイト)からThree.jsをダウンロードします。

ダウンロードできたら、ページを載せるサーバにアップロードして、HTMLでダウンロードしたThree.jsを読み込みます。

今回はミニファイされたthree.min.jsを読み込んでいます。

HTML

XHTML

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/three.min.js"></script> </head> <body> <div id="viewArea"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/three.min.js"></script>
</head>

<body>
<div id="viewArea"></div>
</body>
</html>

Three.jsではbody直下に描画領域を直接読み込むことが多いようなのですが、

自由な場所に配置することを想定して、divを設置し、こちらに描画領域を読み込むことにしました。

CSS
今回は空に浮かんでるイメージにしたかったので、

空色のグラデーションをdivに設定しました。

CSS

#viewArea{ width: 640px; margin: 50px auto; background: -moz-linear-gradient(top, #187aff 0%, #b5d4ff 100%); /* FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#187aff), color-stop(100%,#b5d4ff)); / Chrome,Safari4+ / background: -o-linear-gradient(top, #187aff 0%,#b5d4ff 100%); / Opera 11.10+ / background: -ms-linear-gradient(top, #187aff 0%,#b5d4ff 100%); / IE10+ / background: linear-gradient(to bottom, #187aff 0%,#b5d4ff 100%); / W3C / }

1
2
3
4
5
6
7
8
9

#viewArea{
width: 640px;
margin: 50px auto;
background: -moz-linear-gradient(top, #187aff 0%, #b5d4ff 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#187aff), color-stop(100%,#b5d4ff)); / Chrome,Safari4+ /
background: -o-linear-gradient(top, #187aff 0%,#b5d4ff 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, #187aff 0%,#b5d4ff 100%); / IE10+ /
background: linear-gradient(to bottom, #187aff 0%,#b5d4ff 100%); / W3C */
}

ではいよいよ本体となるJSです。

JavaScript

JavaScript

/--------------------- レンダラーの初期化 ---------------------/ var renderer = new THREE.WebGLRenderer({ antialias:true });//描画を行うレンダラーの作成(アンチエイリアスを有効に) renderer.setSize(640, 640);//描画領域のサイズを設定 renderer.setClearColorHex(0x333333, 0);//描画領域の色と透過度を設定(色は16進数、透過度は0～1) document.getElementById("viewArea").appendChild(renderer.domElement);//描画領域の実装 /--------------------- シーンの作成 ---------------------/ var scene = new THREE.Scene(); /--------------------- カメラの作成 ---------------------/ var camera = new THREE.PerspectiveCamera(15, 500 / 500);//透視投影のカメラを作成(平行投影はOrthographicCamera) camera.position = new THREE.Vector3(0, 0, 8);//カメラの位置 camera.lookAt(new THREE.Vector3(0, 0, 0));//カメラの注視点 scene.add(camera);//シーンにカメラを追加 /--------------------- ライトの作成 ---------------------/ var light = new THREE.DirectionalLight(0xffffff);//無限遠光源(太陽光のような光源)のライトを作成 light.position = new THREE.Vector3(0.577, 0.577, 0.577);//ライトの位置 scene.add(light);//シーンにライトを追加 var ambient = new THREE.AmbientLight(0x212832);//環境光(照り返しのような間接的なの光)を作成 scene.add(ambient); /--------------------- 表示する物体の作成 ---------------------/ var geometry = new THREE.CubeGeometry(1, 1, 1);//形状を作成 var material = new THREE.MeshPhongMaterial({//質感を設定 color: 0xffffff, ambient: 0xffffff,//色、環境 specular: 0xcccccc, shininess:50, metal:true,//ハイライトの色、ハイライトの大きさ、金属の質感を有効 map: THREE.ImageUtils.loadTexture('images/logo_mark.jpg') });//マッピングを設定（bumpMapで凹凸の設定が可能） var mesh = new THREE.Mesh(geometry, material);//物体を作成 scene.add(mesh);//シーンに物体を追加 /--------------------- レンダリング ---------------------/ var baseTime = +new Date; function render() { requestAnimationFrame(render);//アニメーションを作成 mesh.rotation.y = 1 * (+new Date - baseTime) / 1000;//Y軸の回転 mesh.rotation.x = 0.5 * (+new Date - baseTime) / 1000;//X軸の回転 renderer.render(scene, camera);//3Dレンダリングの実行 }; render(); function tick() { var finished = false; // 再描画の処理 // アニメーションが終了したら // finishedをtrueにする if(!finished) requestAnimationFrame(tick); } //requestAnimFrameのクロスブラウザ対応 window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000/60); }; })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/---------------------
レンダラーの初期化
---------------------/
var renderer = new THREE.WebGLRenderer({ antialias:true });//描画を行うレンダラーの作成(アンチエイリアスを有効に)
renderer.setSize(640, 640);//描画領域のサイズを設定
renderer.setClearColorHex(0x333333, 0);//描画領域の色と透過度を設定(色は16進数、透過度は0～1)
document.getElementById("viewArea").appendChild(renderer.domElement);//描画領域の実装

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

/---------------------
カメラの作成
---------------------/
var camera = new THREE.PerspectiveCamera(15, 500 / 500);//透視投影のカメラを作成(平行投影はOrthographicCamera)
camera.position = new THREE.Vector3(0, 0, 8);//カメラの位置
camera.lookAt(new THREE.Vector3(0, 0, 0));//カメラの注視点
scene.add(camera);//シーンにカメラを追加

/---------------------
ライトの作成
---------------------/
var light = new THREE.DirectionalLight(0xffffff);//無限遠光源(太陽光のような光源)のライトを作成
light.position = new THREE.Vector3(0.577, 0.577, 0.577);//ライトの位置
scene.add(light);//シーンにライトを追加

var ambient = new THREE.AmbientLight(0x212832);//環境光(照り返しのような間接的なの光)を作成
scene.add(ambient);

/---------------------
表示する物体の作成
---------------------/
var geometry = new THREE.CubeGeometry(1, 1, 1);//形状を作成
var material = new THREE.MeshPhongMaterial({//質感を設定
color: 0xffffff, ambient: 0xffffff,//色、環境
specular: 0xcccccc, shininess:50, metal:true,//ハイライトの色、ハイライトの大きさ、金属の質感を有効
map: THREE.ImageUtils.loadTexture('images/logo_mark.jpg') });//マッピングを設定（bumpMapで凹凸の設定が可能）
var mesh = new THREE.Mesh(geometry, material);//物体を作成
scene.add(mesh);//シーンに物体を追加

/---------------------
レンダリング
---------------------/
var baseTime = +new Date;
function render() {
requestAnimationFrame(render);//アニメーションを作成
mesh.rotation.y = 1 * (+new Date - baseTime) / 1000;//Y軸の回転
mesh.rotation.x = 0.5 * (+new Date - baseTime) / 1000;//X軸の回転
renderer.render(scene, camera);//3Dレンダリングの実行
};
render();

function tick() {
  var finished = false;

  // 再描画の処理
  // アニメーションが終了したら
  // finishedをtrueにする

  if(!finished)
    requestAnimationFrame(tick);
}

//requestAnimFrameのクロスブラウザ対応
window.requestAnimFrame = (function(){
return window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function(callback){
window.setTimeout(callback, 1000/60);
};
})();

基本的な流れは、

レンダラーの初期化

シーンの作成

カメラの作成

ライトの作成

表示する物体の作成

レンダリング

となります。

「Three.js」を使うと、これらの設定を分かりやすく設定することができます。

私は今回初めてWebGLを扱いましたが、とても馴染みやすい印象を感じました。

初めてWebGLに挑戦される方には、とてもオススメです。

今回は簡単な直方体を作成しましたが、「Three.js」は3Dソフトで作成したモデルデータを、

変換後読み込むためのコンバータなどもいくつか用意されており、

比較的簡単にWebGLで表示することができるようです。

次回はモデルデータの読み込みに挑戦してみたいと思います。

Author Profile

著者近影

NINOMIYA

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

SHARE

合わせて読みたい

Webアクセシビリティの義務化について調べてみました

2024/04/19

Webアクセシビリティの義務化について調べてみました

ZenStack を使用してデータベーススキーマを作成する

2024/04/05

ZenStack を使用してデータベーススキーマを作成する

認証が必要な Cloud Run サービスにアクセスする方法まとめ

2024/03/15

認証が必要な Cloud Run サービスにアクセスする方法まとめ

Next.jsとCypressを使ったWebアプリでテストのカバレッジ率を計測する

2024/03/01

Next.jsとCypressを使ったWebアプリでテストのカバレッジ率を計測する