JavaScript製ライブラリ『Three.js』の一番わかりやすい使い方【WebGLを知らなくても理解できます】

フロントエンド開発をしていてcanvasでリッチな描画を作る勉強をしていると、『Three.js』という言葉にたどり着くことが多いのではないでしょうか？

『Three.js』はWeGLという主に3D描画などに使われる技術を、素人でも分かりやすく使えるようにラッピングしたJavaScript製のライブラリです。

一見3D描画と聞いて、『難しいのでは？』、『自分には無理かも』と思ってしまいがちですが、そんなことはありません。

『Three.js』の書き方は難しい機能などは抽象化して記述することができるので、WebGLを全く知らない状態でも直ぐにコツを掴んでコードを書くことができます。

今回は、そんな『Three.js』を趣味で入門してみたい方や、これから仕事で使うかもしれないとういう方に向けて、最大限に分かりやすく解説していきたいと思います。

コーディングお役立ちツール

Three.jsとは何か

『Three.js』はWebGLと呼ばれるコンピューターグラフィックで使われる難しい技術を、簡単かつ直感的に使えるようにするために作られたJavascriptのライブラリです。

『Three.js』を使えば、難しい数学や3Dの技術をあまり理解していない状態でも、ブラウザで直ぐにコンピューターグラフィックの作成に取りかかることができます。

『Three.js』はその使いやすさから、WebGL界のJQuery的な存在として位置ずけられおり、3Dでcanvasを扱う場合はよく色々なサイトで利用されています。

Three.jsで作られたすごいサイト5選

まずは『Three.js』を使えば、どんなサイトが作れるようになるのか気になるかと思います。

ここでは、『Three.js』で作られた派手なサイトだけではなく、細かいディテールまで作り込まれた繊細なサイトも紹介していきます。

今回紹介するWebサイトはコンテンツとトップページで『Three.js』が使われているものを5個紹介します。

サイトのコンテンツとコンピューターグラフィックをマッチさせることで、どういう表現ができるのかを見ていただければ収穫があると思います。

また、『Three.js』などのWebGLで作成されたコンテンツの情報を頻繁にチェックしたいという方はWebGL 総本山というサイトが情報を発信していますので要チェックです！

Three.js実装が得意な日本のオススメWeb制作会社

Three.jsのダウンロード方法と実行方法

まず『Three.js』をダウンロードするには、こちらのURLにアクセスして『Clone or download』というボタンの中の『Download ZIP』というボタンを押して自分の環境にファイルをダウンロードしましょう。

ダウンロードとファイルの解凍が完了したら、『three.js-master』というフォルダが生成されるので、その中にある『build』というフォルダの中に『three.min.js』というファイルがあるので、そのファイルだけ抜き出しましょう。

完成イメージ / ファイル構成

ファイルを抜き出したら、『html』というフォルダを作成して、その中で作業するようにしましょう。

用意するファイルは『index.html』『style.css』『main.js』『three.min.js』の4つのファイルを準備しておきましょう。ファイルを用意して『index.html』を実行すると上の完成形の状態になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Three.jsテスト</title>
    <script src="./three.min.js"></script>
    <script src="./main.js"></script>
</head>
</head>

<body>
</body>
</html>

* {
    margin: 0px;
    padding: 0px;
}

let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff);
light.position.x = 10;
light.position.y = 10;
light.position.z = 10;
scene.add(light);

let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 100;

let geometry = new THREE.TorusGeometry(30.0, 10.0, 30.0, 100);
let material = new THREE.MeshToonMaterial({
    color: 0x5577ff
});
let torus = new THREE.Mesh(geometry, material);
scene.add(torus);

//画面のサイズが変更された時にcanvasサイズの変更と、アスペクト比を保つ
window.addEventListener('resize', function() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth /  window.innerHeight;
    camera.updateProjectionMatrix();
});

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);

    torus.rotation.y += 0.01;
}
animate();

レンダラーとシーンの作成

まずはレンダラーとシーンを作成しましょう。

レンダラーとは空間に映し出したい映像を最終的に描画してくれるプログラムのことです。

シーンは3次元の空間を表しており、例えば物体を登場させる舞台のような役割を持ちます。

let scene = new THREE.Scene(); //シーンを作成
let renderer = new THREE.WebGLRenderer(); //レンダラーを作成

renderer.setSize(window.innerWidth, window.innerHeight); //描画する幅を画面いっぱいに広げる
document.body.appendChild(renderer.domElement); //body要素の直下にthree.jsのcanvasを追加

光源の作成

次は物体を照らすための光源を作成する必要があります。

『three.js』の世界でも、現実世界と同様に光という概念が存在し、物体に光を照射した反射光で物の存在を認識することができます。

今回は、太陽光のような満遍なく照らす光を手前上部の右側から照射しています。

let light = new THREE.DirectionalLight(0xffffff); //太陽光のような光を作成 (0xffffff = 白色)
light.position.x = 10; //x方向に10移動
light.position.y = 10;　//y方向に10移動
light.position.z = 10; //z方向に10移動
scene.add(light); //シーン(舞台)に光源を登録

カメラの作成

次に物体を映し出すためのカメラを作り出す必要があります。

カメラを作り出すことによって、レンズに入ってきた光を映像として認識できることができます。

今回は、パースペクティブカメラという奥行きをつけることができるカメラを使用して、手前に配置した状態で物体を映し出します。

//new THREE.PerspectiveCamera(視野角, アスペクト比, どこから映すのか, どこまで映すのか);
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 100;

物体の作成

次に、この世界の役者であるメインの物体を作成していきます。

今回作成する物体はドーナツ型の形状のトーラスというオブジェクトを作成します。

トーラスを作成する場合は『new THREE.TorusGeometry(半径, チューブの太さ, 放射の滑らかさ, 管の滑らかさ);』と記述します。

let geometry = new THREE.TorusGeometry(30.0, 10.0, 30.0, 100);

物体の質感を設定 / シーンに登録

次に作成したオブジェクトの質感を設定します。

今回設定する質感はアニメ風の質感で、トゥーンマテリアルという影が少し強調されたような表示結果を得られます。

let geometry = new THREE.TorusGeometry(30.0, 10.0, 30.0, 100);
let material = new THREE.MeshToonMaterial({
    color: 0x5577ff //色を決める
});
let torus = new THREE.Mesh(geometry, material); //オブジェクトと質感を合わせる
scene.add(torus);

画像を描画

いよいよ、画面に映像を映し出す段階に入ります。

先ほど作成したレンダラーを利用して画面にオブジェクトを映し出すレンダリングとい処理をします。

レンダリングをする際は、シーンとカメラが格納された変数を『render』関数の引数にセットします。

renderer.render(scene, camera);

アニメーションさせる

最後は、レンダリングを毎秒60回行う処理を書いて、オブジェクトを回転させるアニメーションをほどこします。

一枚の静的なレンダリングを行う際はレンダリングは一回で良いのですが、ブラウザで実行する際は継続して画面を描画しなければなりません。

下の例のように『animation』関数を実行して、『requestAnimationFrame(animate);』で毎秒60フレーム描画するようになっています。

そして、その中でトーラスを右回転(rotation.y)する処理を実行しています。

そうすることによって、回転する画像が新しいフレームに切り替わるたびに描画されます。

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);

    torus.rotation.y += 0.01;
}
animate();

Three.jsの実践的な使い方を学べるオススメの本

表紙	こんな人にオススメ
	実例を交えながらThree.jsによるWebコンテンツ作成の全ての側面を知りたい人数学やWebGLに詳しくないけど、JavaScriptで手軽に3Dプログラミングに入門してみたい人