Three.jsを試してみる

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

対応ブラウザ

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

Three.jsの構築要素

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

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

準備

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

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

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

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

コードの記述

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

JavaScript

(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);
})();

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

helperの表示

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

JavaScript

(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);
})();

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

物体を表示して動かす

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

JavaScript

(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();
})();

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

【参考サイト】

• Three.js入門 (全14回) – プログラミングならドットインストール
• 初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ | HTML5Experts.jp
• デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG