サイト制作に関するメモ書き

HOME > JavaScript > Three.jsを試してみる

Three.jsを試してみる

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>の直前に以下のように記述します。

<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);
})();
PerspectiveCamera(fov, aspect, near, far); カメラの設定
fov:視野角
aspect:画面の縦横比(横 / 縦)
near:カメラの映す範囲。手前をどこまで表示するか。
far:カメラの映す範囲。奥をどこまで表示するか。
setSize(width, height); 幅と高さの指定。

デモページ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);
})();
position.set(X, Y, Z); 配置するX軸、Y軸、Z軸の座標を指定。

デモページ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();
})();
BoxGeometry(X, Y, Z); 箱型のジオメトリーの作成。X、Y、Zでそれぞれの方向のサイズを指定。
SphereGeometry(size); 球体のジオメトリーの作成。sizeで指定した数値が半径。
MeshLambertMaterial({ color: ‘#xxxxxx’}); 物体のマテリアルの指定。
今回は色の指定ですが、他にもテクスチャーや光沢など色々指定できます。
Mesh(geometry, material); ジオメトリーとマテリアルからメッシュを作成。
scene.add(mesh); メッシュをシーンに追加。

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

【参考サイト】

 

コメントを残す

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

▲PAGE TOP