【Three.js】入門編
目次
はじめに
Three.jsはHTMLの3D技術「WebGL」を手軽に扱うことができるライブラリです。プラグイン無しで本格的な3D表現を作成できます。今回は、ライブラリの導入から実際に回転する直方体を表示させるところまでを行いたいと思います。
完成見本とサンプルコード
完成見本がこちらになります。
HTMLファイルを用意してサンプルコードを貼り付けてみると、動画のように直方体が回転する様子が確認できると思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script>
<script>
window.addEventListener('load', init);
function init() {
// サイズを定義
const width = 900;
const height = 600;
// レンダリング
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#test')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
// 表示オブジェクト（直方体）を作成
const geometry = new THREE.BoxGeometry(300, 500, 400); //形状(幅, 高さ, 奥行き)
const material = new THREE.MeshNormalMaterial(); //色や質感
const mesh = new THREE.Mesh(geometry, material); //二つの情報からオブジェクトを生成
// オブジェクトをシーンに追加
scene.add(mesh);
// アニメーションの実行
tick();
// アニメーションを定義
function tick() {
requestAnimationFrame(tick);
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
}
</script>
</head>
<body>
<canvas id="test"></canvas>
</body>
</html>こちらのコードについて、工程ごとに解説していきたいと思います。
canvas要素を用意する
Three.jsではcanvas要素を利用してオブジェクトを描画しますので、その表示エリアを用意しておきましょう。後々の記述で必要となるため、ID属性も付与しておきます。
<body>
<canvas id="test"></canvas>
</body>ライブラリを読み込む
canvas要素を用意していても、ライブラリを導入しなければ始まりません。今回はCDNでお手軽に導入しましょう。WebGLの処理は、ページの読み込みが終わってから行います。addEventListener()関数でloadイベントの発生を監視し、読み込みが終わったタイミングで関数init()を始動させます。この関数init()の中にThree.jsのコードを記述していきます。
<script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script><script>
window.addEventListener('load', init);
function init(){
// Three.jsのコードをここに記述していきます
}
</script>レンダラーを用意
WebGLのレンダリングをするためのレンダラーを作成します。「THREE.WebGLRendererクラス」のコンストラクターに、引数として先程のcanvas要素を指定します。
※「const」…定数。変数と違って再代入は不可。
// サイズを定義
const width = 900;
const height = 600;
// レンダリング
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#test')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);加えて、レンダラーのサイズをsetSize()メソッドで設定します。
renderer.setSize(width, height);シーンを作成する
「シーン（＝3D空間）」を作成します。3Dオブジェクトや光源等がここに配置されます。
// シーンを作成
const scene = new THREE.Scene();カメラを作成する
3Dならではの要素として、「どの視点から空間を撮影するか」という設定をしなければなりません。この機能を「視点」や「カメラ」などと呼びます。「THREE.PerspectiveCameraクラス」のコンストラクターで「画角・アスペクト比・描画開始距離・描画終了距離」の4つを引数として渡し、カメラを作成することができます。続けて「camera.position.set」でカメラの初期座標を設定可能です。
// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height); //画角・アスペクト比
camera.position.set(0, 0, +1000); //カメラの初期座標(x,y,z)を設定オブジェクトを作成する
空間やカメラなどの下準備が終わりましたので、次は実際に表示するオブジェクトを作成していきましょう。
Three.jsでは、表示するオブジェクトのことを「メッシュ」と呼びます。このメッシュは、「ジオメトリ」と「マテリアル」という2つの要素から構成されます。ジオメトリは形状、マテリアルは色や質感の情報を持っています。なので、メッシュを作成するためにはジオメトリ（形状）とマテリアル（色や質感）を定義する必要があります。
まずはジオメトリ、つまり形状から設定しましょう。「BoxGeometry」を使用すると、立方体や直方体など箱上の物体を生成できます。
//形状(幅, 高さ, 奥行き)
const geometry = new THREE.BoxGeometry(300, 500, 400); 続けてマテリアル、つまり色や質感を設定しましょう。「MeshNormalMaterial」を使用すると、適当なカラーを割り振ってくれます。
//色や質感
const material = new THREE.MeshNormalMaterial();ジオメトリとマテリアルの2つとも定義したら、この情報でメッシュを作成することができます。以下のように記述しましょう。
//2つの情報からオブジェクトを生成
const mesh = new THREE.Mesh(geometry, material);これでメッシュの作成は完了したのですが、実際にページに表示させるには「シーンに追加する」という工程を踏まなければなりません。1行で済みますので、忘れずに記述しましょう。
// オブジェクトをシーンに追加
scene.add(mesh);アニメーション
最後に回転するアニメーションを作成しましょう。
オブジェクトを回転させるという挙動に関数する設定以外に、「時間経過で関数を呼び続けること（＝アニメーションさせること）」「Three.jsの表示結果を最新のものに更新すること」の2点に関する記述が必要です。
// アニメーションの初回実行
tick();
// アニメーションを定義
function tick() {
requestAnimationFrame(tick); //関数を呼び続ける
box.rotation.y += 0.01; //回転の挙動
renderer.render(scene, camera); //表示結果を更新
}以上で完成です！
