three.jsで3Dデザインの作成

2014年9月26日

Pocket

l_060

最近のWebデザインは2次元表現のみならず、3次元表現が増えてきていますね!
3Dデザインと効くと敷居が高いと思いますが、three.jsを使うとあっと間に3Dデザインができます。
今回は、three.jsを使用して3Dで立体を描画してみましょう!
 
 

準備

まずは、three.jsを下記からダウロードします。
 
http://threejs.org/
 
ダウンロードしたフォルダ内のbuildフォルダにあるthree.min.jsのファイルを任意の場所に移し、htmlファイルで読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/three.min.js"></script>

 
 

基本用語

scene 3Dを表現する空間
geometry 描画するオブジェクトの形
material 描画するオブジェクトの素材
mesh 3Dオブジェクト
camera sceneを撮影するカメラ
renderer 作成したmeshをHTMLと紐付け表示させる

 
 

描画空間作成

では、早速コードを書いていきましょう。
HTML

<div id="three_d" style="width:500px; height:300px;"></div>

3Dを描画する場所を作ります。
 
JavaScript

//scene
var scene = new THREE.Scene();

図形が描かれる3D空間のsceneを作成。
 
 

オブジェクト作成

//cube
var geometry = new THREE.CubeGeometry(50,50,50); //----①
var material = new THREE.MeshLambertMaterial({color : "#2E2E2E"}); //----②
var cube = new THREE.Mesh(geometry,material); //----③
cube.position.set(0, 0, 0); //----④
scene.add(cube); //----⑤

①geometry(キューブ型)を作成。
②materialを作成。
③meshを作成。
④meshのポジションを設定。
⑤sceneに描画する。
 
 

カメラ作成

//camera
var camera = new THREE.PerspectiveCamera(45,width/height,1,1000); //----①
camera.position.set(100,100,200); //----②
camera.lookAt(cube.position); //----③

①cameraの写す領域を設定。
②cameraのポジションを設定。
③cameraの向いている方向を設定。この場合は、cubeの方に向けています。
 
 

renderer

//#three_dのサイズ取得
var width = $('#three_d').width();
var height = $('#three_d').height()

//renderer
var renderer = new THREE.WebGLRenderer(); //----①
renderer.setSize(width,height); //----②
renderer.setClearColor(0xeeeeee,1); //----③
document.getElementById('three_d').appendChild(renderer.domElement); //----④
renderer.render(scene,camera); //----⑤

①renderer作成。
②先ほどcameraで設定したサイズを設定。
③sceneの背景色を設定。
④#three_dにrendererを展開。
⑤表示する。
 
スクリーンショット 2014-09-17 23.59.38
 
このままだと光源がないので真っ黒なままです。
次に光源を足しましょう。
 

光源を作成

//light
var light = new THREE.DirectionalLight(0xffffff); //----①
light.position.set(200,600,0); //----②
scene.add(light); //----③
var ambient = new THREE.AmbientLight(0x1C1C1C); //----④
scene.add(ambient); //----⑤

①光源(light)の色を設定。
②lightのポジションを設定。
③lightをsceneに追加。
④AmbientLight(環境光)を設定。
⑤AmbientLightをsceneに追加。
 
スクリーンショット 2014-09-17 17.22.45
 
 

オブジェクトをアニメーションさせる

JavaScript

function render(){
	requestAnimationFrame(render); //----①
	cube.rotation.x += 1 * Math.PI / 180; //----②
	cube.rotation.y += 1 * Math.PI / 180; //----②
	cube.rotation.x += 1 * Math.PI / 180; //----②

	renderer.render(scene,camera);
}
render(); //----③

①アニメーションさせるためにrender()を呼び起こす。
②cubeをx、y、z方向に回転させる。
③render()を呼び起こす。
 
 

OrbitControls

色々な向きからオブジェクトを見れるようにcamera位置をカーソルで動かせるようにします。
ダウンロードファイルの中にあるOrbitControls.jsのファイルを任意の場所に移動し、読み込みます。
HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>

JavaScript

//controls
var controls = new THREE.OrbitControls(camera,renderer.domElement); //----①
controls.minDistance = 	10; //----②
controls.maxDistance = 1000; //----③

function render(){
	requestAnimationFrame(render);
	cube.rotation.x += 1 * Math.PI / 180;
	cube.rotation.y += 1 * Math.PI / 180;
	cube.rotation.x += 1 * Math.PI / 180;

	renderer.render(scene,camera);
	controls.update(); //----④
}
render();

①controlsを作成。
②近づける距離の最小値を設定。
③遠ざかれる距離の最大値を設定。
④controlsをアップデートする。
 
 
 

DEMO

上記のコードをまとめた物が下記です。
 
DEMO
 
 
HTML

<!DOCTYPE html>
<html>
<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
</head>
<body>
	<div id="three_d" style="width:500px; height:300px;"></div>
<body>
</html>

JavaScript

//#three_dのサイズ取得
var width = $('#three_d').width();
var height = $('#three_d').height()

//scene
var scene = new THREE.Scene();

//cube
var geometry = new THREE.CubeGeometry(50,50,50);
var material = new THREE.MeshLambertMaterial({color : "#2E2E2E"});
var cube = new THREE.Mesh(geometry,material);
cube.position.set(0, 0, 0);
scene.add(cube);

//light
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(200,600,0);
scene.add(light);
var ambient = new THREE.AmbientLight(0x1C1C1C);
scene.add(ambient);

//camera
var camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
camera.position.set(100,100,200);
camera.lookAt(cube.position);

//renderer
var renderer = new THREE.WebGLRenderer()
renderer.setSize(width,height);
renderer.setClearColor(0xeeeeee,1);
document.getElementById('three_d').appendChild(renderer.domElement);
renderer.render(scene,camera);

//controls
var controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.minDistance = 	10;   //近づける距離の最小値
controls.maxDistance = 1000;   //遠ざかれる距離の最大値

function render(){
	requestAnimationFrame(render);
	cube.rotation.x += 1 * Math.PI / 180;
	cube.rotation.y += 1 * Math.PI / 180;
	cube.rotation.x += 1 * Math.PI / 180;

	renderer.render(scene,camera);
	controls.update();
}
render();

 
 
 
他にも色々なオブジェクトを簡単に描画できるので、気になった人は色々試してみてください!

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ