3Dグラフィックスを使ったWEBサイトでリッチな表現が可能に

お世話になっております、美土路です。

たくさんあるWEBサイトですが、表現方法の多様性が増していることに気づいたことはありませんか？
もちろん、WEBサイトの表現方法は、HTMLやCSS、JavaScriptなどの技術が進化してきたことによるものですが、その中でも、3Dグラフィックスを使った表現が増えてきているのではないでしょうか。

ということで、今回は、WEBサイトで3Dグラフィックスを表示するためのJavaScriptライブラリ「three.js」を使用して、3Dグラフィックスを表示する方法についてご紹介します。
私自身があまり使う機会がないのですが、多様化しているWEBサイトの表現方法の一つとして、ご紹介していければと思います。

three.jsとは

three.jsは、3Dグラフィックスをウェブブラウザ上で表示するためのJavaScriptライブラリです。three.jsを使うことで、ウェブブラウザ上で3Dグラフィックスを表示することができます。

・three.js公式サイト
https://threejs.org/

とりあえず地球を回してみた

地球を回転させるだけのサンプルを作成しました。
https://wreath-ent.co.jp/sample/three/

とってもシンプルですが、3Dで動いてるってだけで少しWEBサイトがリッチになったと思いませんか？
後述させていただきますが、本気で3Dグラフィックスを使ったWEBサイトは、もっと凄いものがたくさんあります。

three.jsを使った3Dグラフィックスの表示方法

three.jsを使って3Dグラフィックスを表示するためには、以下の手順が必要です。

1. three.jsを読み込む
2. シーンを作成する
3. カメラを作成する
4. レンダラーを作成する
5. オブジェクトを作成する
6. アニメーションを設定する
7. レンダリングする

three.jsを読み込む

three.jsを読み込むためには、以下のようにスクリプトタグを使ってthree.jsを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

シーンを作成する

three.jsを使って3Dグラフィックスを表示するためには、まずシーンを作成する必要があります。シーンは、3Dグラフィックスを表示するための空間のようなものです。

var scene = new THREE.Scene();

カメラを作成する

次に、カメラを作成します。カメラは、3Dグラフィックスをどのように表示するかを決定するためのものです。

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

レンダラーを作成する

次に、レンダラーを作成します。レンダラーは、3Dグラフィックスを表示するためのものです。

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

オブジェクトを作成する

次に、オブジェクトを作成します。オブジェクトは、3Dグラフィックスを表示するためのものです。

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

アニメーションを設定する

次に、アニメーションを設定します。アニメーションは、3Dグラフィックスを動かすためのものです。

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

レンダリングする

最後に、レンダリングします。レンダリングは、3Dグラフィックスを表示するためのものです。

renderer.render(scene, camera);

以上が、three.jsを使って3Dグラフィックスを表示するための手順です。three.jsを使って3Dグラフィックスを表示することで、WEBサイトの表現方法がより多様化していることがわかります。

htmlに出力する

上記のスクリプトをhtmlに記述し、ブラウザで表示すると、3Dグラフィックスが表示されます。

ここまでは簡単

そう、ここまでは本当に簡単なんです。
3DグラフィックスをWebサイトに組み込むことは、視覚的に魅力的なユーザー体験を提供できますが、技術的には確かに挑戦的です。

three.jsを使った3Dグラフィックの表示では、特にモデルの読み込み、光源や影の扱い、テクスチャの適用などに注意が必要です。
また、パフォーマンスの最適化も重要な課題となっており、サーバーサイドの処理やクライアントサイドの処理を最適化することが求められます。

three.jsを使用しているWEBサイト

three.jsの公式サイトには、three.jsを使用しているWEBサイトの一覧が掲載されています。
その中でも、特に印象的なWEBサイトをいくつかご紹介します。

Junni is…

3Dモデルから全アクションに至るまで、three.jsを使用して制作されたWEBサイトです。
うーん、いつになったらこんな表現を身につけることができるんだろう……。
精進します。

・WEBサイトURL
https://next.junni.co.jp/

Robin Mastromarino – Interactive Designer

パリ在住のインタラクティブデザイナー、ロビン・マストロマリーノ氏のポートフォリオサイトです。
おそらく5年くらい前のWEBサイトなんですよね……。
5年前はthree.jsを使ったサイトはチラホラ見かけたものですが、まさか自分が関わるとは思ってなかったです。
ちゃんと勉強しておけばよかった。

スクロールすると、3Dグラフィックスが動くので、ぜひご覧ください。

・WEBサイトURL
http://robinmastromarino.com/

Dilla Dimension

こちらのWEBサイトは、音楽プロデューサー、Dilla Dimension氏のポートフォリオサイトです。
大きなドーナツのような3Dグラフィックスが印象的ですよね。
音楽と3Dグラフィックスが組み合わさったWEBサイトは、とても魅力的です。
これくらいのドーナツなら作れるかもしれない……。

・WEBサイトURL
http://www.dilladimension.com/

いつかは挑戦してみたい3Dグラフィックス

最近ではブレンダーなどの3Dモデリングソフトも無料で使えるものが増えてきているので、自分で3Dモデルを作成して、three.jsを使ってWEBサイトに組み込んだりしてみたいですね。

また、日本語のマニュアルも用意されているので、最低限の知識はここから得ることができますので、興味のある方は一緒に勉強しましょう。

・three.js日本語のマニュアル
https://threejs.org/docs/index.html#manual/ja/introduction/Creating-a-scene