Three.jsを試してみる

2015.02.20

WebGLを使った3D描画を実装できるライブラリ「Three.js」を使ってみたので、使い方をメモしておきます。

対応ブラウザ

WebGLが対応しているブラウザはこちら。
IEは11から対応していて、スマホは未対応のものが多めです。

try-threejs01

Three.jsの構築要素

Three.jsは主に以下の部品で構築していきます。

  • シーン：3Dを表示する空間
  • カメラ：シーンを表示する視点
  • メッシュ：3Dのオブジェクト。ジオメトリーとマテリアルから構成。
    • ジオメトリー：メッシュのサイズなど
    • マテリアル：メッシュの色やテクスチャー、光沢など
  • ライト：シーン内の光源
  • レンダラー：画面への描画

準備

公式サイトからthree.jsをダウンロードします。

try-threejs02

ダウンロードしたファイルを解凍後、buildフォルダ内にある three.min.jsを使用します。
HTMLファイルを作成し、</body>の直前に以下のように記述します。

1
2
<script src="./three.min.js"></script>
<script src="./sample.js"></script>

今回はsample.jsにThree.jsを使用するための記述を追加していきます。
　

コードの記述

シーンとカメラを作成して、画面を表示させます。
sample.jsに以下を記述します。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function() {
    // canvasのサイズを指定
    var canvasWidth = 600, canvasHeight = 400;
 
    // シーンの作成
    var scene = new THREE.Scene();
 
    // カメラの作成
    var camera = new THREE.PerspectiveCamera(75, canvasWidth / canvasHeight, 1, 1000);
 
    // 画面表示の設定
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(canvasWidth, canvasHeight);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, camera);
})();
PerspectiveCamera(fov, aspect, near, far); カメラの設定
fov:視野角
aspect:画面の縦横比(横 / 縦)
near:カメラの映す範囲。手前をどこまで表示するか。
far:カメラの映す範囲。奥をどこまで表示するか。
setSize(width, height); 幅と高さの指定。

デモページ1
この時点ではカメラを設置して表示させただけなので、真っ黒な画面が表示されるだけです。
　

helperの表示

カメラ位置の設定、ガイドの表示、背景色の設定を行います。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function() {
    // canvasのサイズを指定
    var canvasWidth = 600, canvasHeight = 400;
 
    // シーンの作成
    var scene = new THREE.Scene();
 
    // カメラの作成
    var camera = new THREE.PerspectiveCamera(75, canvasWidth / canvasHeight, 1, 1000);
    camera.position.set(30, 40, 80);
 
    // ヘルパーの表示
    var axis = new THREE.AxisHelper(1000);
    axis.position.set(0, 0, 0);
    scene.add(axis);
 
    // 画面表示の設定
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.setClearColor(0xeeeeee, 1);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene, camera);
})();
position.set(X, Y, Z); 配置するX軸、Y軸、Z軸の座標を指定。

デモページ2
赤、緑、青のガイドラインが表示されました。
それぞれ赤がX軸、緑がY軸、青がZ軸になります。
　

物体を表示して動かす

箱と球体を配置して、回転させてみます。

JavaScript

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
(function() {
    // canvasのサイズを指定
    var canvasWidth = 600, canvasHeight = 400;
 
    // シーンの作成
    var scene = new THREE.Scene();
 
    // 箱の作成
    var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
    var boxMaterial = new THREE.MeshLambertMaterial({ color: '#E74C3C'});
    boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
    boxMesh.position.set(0, 0, 0);
    scene.add(boxMesh);
 
    // 球体の作成
    var sphereGeometry = new THREE.SphereGeometry(10);
    var sphereMaterial = new THREE.MeshLambertMaterial({color: '#3498DB'});
    var sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphereMesh.position.set(30, 20, 30);
    scene.add(sphereMesh);
 
    // カメラの作成
    var camera = new THREE.PerspectiveCamera(75, canvasWidth / canvasHeight, 1, 1000);
    camera.position.set(30, 40, 80);
 
    // ライトの作成
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 100, 30);
    scene.add(light);
 
    // ヘルパーの表示
    var axis = new THREE.AxisHelper(1000);
    axis.position.set(0, 0, 0);
    scene.add(axis);
 
    // 画面表示の設定
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.setClearColor(0xeeeeee, 1);
    document.body.appendChild(renderer.domElement);
    function render() {
        requestAnimationFrame(render);
        boxMesh.rotation.x += 0.05;
        boxMesh.rotation.y += 0.05;
        sphereMesh.rotation.y += 0.01;
        sphereMesh.rotation.z += 0.01;
        renderer.render(scene, camera);
    }
    render();
})();
BoxGeometry(X, Y, Z); 箱型のジオメトリーの作成。X、Y、Zでそれぞれの方向のサイズを指定。
SphereGeometry(size); 球体のジオメトリーの作成。sizeで指定した数値が半径。
MeshLambertMaterial({ color: ‘#xxxxxx’}); 物体のマテリアルの指定。
今回は色の指定ですが、他にもテクスチャーや光沢など色々指定できます。
Mesh(geometry, material); ジオメトリーとマテリアルからメッシュを作成。
scene.add(mesh); メッシュをシーンに追加。

デモページ3
箱と球体が画面に表示されました。
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031