three.jsについて
three.jsは3Dを気軽に扱えるJavascriptのライブラリです。無料でありながら高度な機能が使用できるので、様々なサイトで利用されており注目を集めています。
今回はこのライブラリを使用して簡単なプログラムを作成したいと思います。
準備
three.jsは以下のサイトから無料でダウンロードできます。
https://threejs.org/
色々なサンプルコードやドキュメント等が入っていますが、必要なファイルはthree.jsファイルだけです。
画面の表示
このthree.jsを読み込んでHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
// (1)シーン
var scene = new THREE.Scene();
// (2)カメラ
var camera = new THREE.OrthographicCamera(
-window.innerWidth/2, window.innerWidth/2,
window.innerHeight/2, -window.innerHeight/2,
1, 1000 );
camera.position.z = 400;
camera.position.y = 120;
camera.lookAt( scene.position );
// (3)レンダラ
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// (4)レンダーループ
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
</script>
</body>
このファイルをブラウザで開くと真っ黒な画面が表示されます。
three.jsで画面を表示させるためには、(1)シーン、(2)カメラ、(3)レンダラの3つが必要になります。
シーンに3Dの物体を追加していき、カメラでどこから見るかを決め、それをレンダラで表示します。
アニメーションさせるためには何回も繰り返して表示する必要があるため、(4)レンダーループという仕組みで表示します。
太陽の追加
画面ができたので何か表示してみましょう。
今回は太陽と地球のシミュレータを作成してみることにします。
以下のコードを(4)レンダラーループの前に挿入します。
// 太陽の追加
var geometry = new THREE.SphereGeometry(60, 12, 12);
var material = new THREE.MeshBasicMaterial({ color: 0xff8844, wireframe: true, });
var sun = new THREE.Mesh( geometry, material );
scene.add( sun );
3Dの物体を作成するにはジオメトリ（幾何学的構造）とマテリアル（原材料）が必要になります。
球体を作成するのでジオメトリにはSpereGeometryを使います。色はオレンジ色にして、ワイヤーフレームで構造が確認できるようにします。
ジオメトリとマテリアルをメッシュというもので合成すると太陽ができました。
作成された太陽をシーンに追加すると太陽が表示されます。
太陽を自転させる
動きがなくて寂しいので太陽を自転させてみます。レンダーループのrender関数に太陽を回転させる処理を追加します。
// (4)レンダーループ
function render() {
sun.rotation.y += 0.005;
requestAnimationFrame( render );
renderer.render( scene, camera );
}
地球の追加
次に地球を作成します。
// 地球
var earth = new THREE.Mesh(
new THREE.SphereGeometry(20, 8, 8),
new THREE.MeshBasicMaterial({ color: 0x6699ff, wireframe: true, })
);
scene.add ( earth );
earth.position.x = 250;
太陽を作成した時と同様にジオメトリとマテリアルから地球を作成し、シーンに追加します。
そのままだと太陽と位置が被るので地球の位置をx軸方向にずらしました。
地球も自転させたいのでrender()に以下のコードを挿入します。
earth.rotation.y += 0.03;
地球の公転
地球を太陽の周りを公転させるには、クォータニオン（四元数）を使います。
// 地球公転用の回転
var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3(0, 1, 0), 0.01);この回転を地球の座標に対して適用すると、地球を公転させることができます。
繰り返し適用させるために、render()に以下のコードを挿入します。
earth.position.applyQuaternion( quaternion );
まとめ
今回はthree.jsを使って簡単な太陽と地球のシミュレーターを作成してみました。three.jsには様々な機能がありますので色々試してみると面白いと思います。
