JavaScript

【JavaScript】Three.jsを使って3Dグラフィックスを表現する方法！

こんにちは！

今日は、Three.jsという素晴らしいJavaScriptライブラリについてお話しします。

Webブラウザ上で3Dコンテンツを簡単に作成できるこのライブラリは、開発者にとって非常に便利です。

今回はThree.jsについて紹介していきます！

Contents
  1. Three.jsとは？
  2. Three.jsの基本構成
  3. Three.jsのインストール方法
  4. 3Dオブジェクトの作成
  5. アニメーションの追加
  6. ライティングの重要性
  7. カメラの操作
  8. サンプルコードをHTMLに保存
  9. Three.jsの応用例
  10. Three.jsの学習リソース
  11. まとめ

Three.jsとは？

Three.jsは、WebGLを利用して3Dグラフィックスを描画するためのJavaScriptライブラリです。

これを使うことで、複雑な3D表現を簡単に実現できます。

特に、専門的な知識がなくても、直感的に3Dコンテンツを作成できるのが大きな魅力です。

Three.js – JavaScript 3D Library
公式サイト

threejs.org

Three.jsの基本構成

Three.jsを使うためには、基本的に以下の3つの要素が必要です。

  • シーン: 3D空間を定義します。
  • カメラ: どのようにシーンを表示するかを決定します。
  • レンダラー: シーンを描画する役割を担います。

これらを組み合わせることで、3Dオブジェクトを表示することができます。

Three.jsのインストール方法

Three.jsを使うためのインストールはとても簡単です。以下の手順で始めてみましょう。

  • CDNを利用する: HTMLファイルに以下のスクリプトタグを追加します。
  • ローカルにダウンロード: Three.jsの公式サイトから最新のライブラリをダウンロードし、プロジェクトに追加します。 
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>

3Dオブジェクトの作成

Three.jsでは、さまざまな3Dオブジェクトを簡単に作成できます。

例えば、立方体を作成するコードは以下の通りです。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const 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シーンでは、ライティングが非常に重要です。適切なライティングを設定することで、オブジェクトの質感や立体感が大きく変わります。

以下は、ポイントライトを追加する例です。

const light = new THREE.PointLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

このようにして、シーンに光を加えることで、よりリアルな表現が可能になります。

カメラの操作

カメラの位置や向きを変更することで、シーンの見え方が変わります。

例えば、カメラをオブジェクトから離すことで、全体を見渡すことができます。

camera.position.z = 5;

この設定を行うことで、立方体全体を視認できるようになります。

サンプルコードをHTMLに保存

試しに、サンプルコードをHTMLに保存して表示させてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Three.js Sample</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
</head>
<body>
    <script>
        // シーン、カメラ、レンダラーの作成
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 立方体の作成
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // カメラの位置を設定
        camera.position.z = 5;

        // アニメーションループ
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

HTMLファイルをブラウザ等で開くと以下のようになりました！

立方体が動いているのが分かります。

Three.jsの応用例

Three.jsは、さまざまな分野で活用されています。

以下はその一部です。

分野使用例
ゲームインタラクティブな3Dゲーム
アーキテクチャ建物の3Dモデル表示
バーチャルリアリティVR体験の構築
教育3Dシミュレーションの作成

これらの応用例からもわかるように、Three.jsは多岐にわたる用途で利用されています。

Three.jsの学習リソース

Three.jsを学ぶためのリソースは豊富にあります。

以下のサイトを参考にしてみてください。

  • 公式ドキュメント: Three.jsの基本から応用まで詳しく解説されています。
  • YouTubeチュートリアル: 動画で学ぶことで、視覚的に理解しやすくなります。
  • オンラインフォーラム: 他の開発者と情報交換ができる場です。

まとめ

Three.jsは、Webブラウザ上で3Dコンテンツを簡単に作成できる強力なツールです。

シンプルな構成から始めて、アニメーションやライティングを追加することで、魅力的な3Dシーンを作り上げることができます。

これからもThree.jsを使って、さまざまな3D表現に挑戦してみてください！

-JavaScript