はじめに

three.jsはJavaScriptで書かれた3Dライブラリであり、WebGLを使用して高品質な3Dグラフィックスをレンダリングすることができます。この記事では、three.jsを使用して動きのあるWebページを作成する方法について紹介します。また、ハンズオンの手順も合わせて説明します。

ハンズオン：three.jsを使って動きのある立方体を作成する

まずはthree.jsを使用して、動きのある立方体を作成してみましょう。以下の手順に従って進めてください。
①HTMLに必要なスクリプトを読み込むまずはじめに、three.jsを使用するために必要なスクリプトを読み込みます。以下のコードをheadタグ内に追加してください。

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

②シーンを作成する three.jsでは、3Dオブジェクトをレンダリングするためにシーンを作成する必要があります。以下のコードを追加して、シーンを作成してください。

var scene = new THREE.Scene();

③カメラを作成するシーンを作成したら、カメラを作成する必要があります。以下のコードを追加して、カメラを作成してください。

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

④レンダラーを作成するレンダラーを作成し、シーンとカメラを渡して、画面に表示するための準備をします。以下のコードを追加して、レンダラーを作成してください。

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

⑤立方体を作成するシーン、カメラ、レンダラーを作成したら、立方体を作成してみましょう。以下のコードを追加して、立方体を作成してください。

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

⑥アニメーションを作成する最後に、アニメーションを作成してみましょう。以下のコードを追加して、アニメーションを作成してください。

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

これで、動きのある立方体が完成しました。ブラウザで確認してみましょう。

three.jsを使ったWebページの応用例

three.jsを使ったWebページの応用例として、以下のようなものがあります。

3Dモデルの表示 three.jsを使用して、3DモデルをWebページ上に表示することができます。このようにすることで、商品の3DモデルをWebページ上で見ることができるようになります。
ゲームの作成 three.jsを使用すれば、ブラウザ上で動作するゲームを作成することができます。高品質なグラフィックスをレンダリングすることができるため、本格的なゲームを作成することができます。
データ可視化 three.jsを使用して、膨大なデータを可視化することができます。例えば、地図上にデータをプロットすることができるため、データの傾向やパターンを視覚的に理解することができます。

まとめ

この記事では、three.jsを使用して動きのあるWebページを作成する方法について紹介しました。また、ハンズオン形式で立方体を作成する手順も説明しました。three.jsを使えば、高品質な3Dグラフィックスをレンダリングすることができるため、Webページの表現力を大幅に向上させることができます。是非、挑戦してみてください。