Blenderで作った3DモデルをWebページで動かせるようにしよう

今回は3DCGアニメーション制作ソフトのBlenderで作成した3DモデルをWebページで動かす方法を紹介します！

Table of Contents

Blenderで3Dモデルを作成する

Blender公式から、お使いのPCのOSやバージョンに合うBlenderをダウンロードしてインストールします。

Blender公式
https://www.blender.org/

インストールできたら、アプリを開きます。

デフォルトでは立方体の3Dモデルがあるので、まずはこれを削除します。

立方体をクリックして、オレンジ色の線が出たら右クリックし、削除をクリックします。

左上のメニューから

追加　＞　メッシュ　＞　モンキー

をクリックします。

すると、このなんとも言えない形状の猿が現れます。

デフォルトだと色が出ないので、右上の右から二番目の3Dビューをクリックします。

デフォルトでは真っ白になっているので、色をつけていきます。

画面右下の方のマテリアルをクリックし、＋新規をクリックします。

ベースカラーの色の部分をクリックして、好みの色を選びます。

ここではとりあえず不気味さが増す水色にしときますね。

色をつけたら.glbのファイル形式にしてエクスポートします。

画面左上のファイルから、エクスポート、glTF2.0(.glb/.gltf)をクリックして、ファイル名をmonkey.glbにしてエクスポートします。

これで3Dモデルの準備は完了です。

Visual Studio Codeをインストール

今回はローカル上のhtmlファイル内で3Dモデルを動かせるようにするので、Visual Studio Codeをインストールしておきます。

VScode公式
https://code.visualstudio.com

Visual Studio Codeをインストールできたら、拡張機能のLive Serverをインストールします。

画面左上の一番下のメニュー項目をクリックします。

クリックして出た検索欄にLive Serverと入力します。

表示されたLive Serverをクリックして、有効にするボタンをクリックします。

これでVisual Studio Codeの準備は完成です。

コードを作成する

Visual Studio Codeで

command + N（Mac）もしくはCtrl + N (Windows)でファイルを新規作成します。

新規作成したファイルに、以下のコードを貼り付けてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 3Dモデル表示 - 操作可能</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>

    <script>
        // シーン、カメラ、レンダラーを作成
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 照明を追加
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(10, 10, 10).normalize();
        scene.add(light);

        const ambientLight = new THREE.AmbientLight(0x404040, 1.5); // 全体を照らすアンビエントライト
        scene.add(ambientLight);

        // GLTFLoaderを使ってモデルをロード
        const loader = new THREE.GLTFLoader();
        loader.load('./monkey.glb', function (gltf) {
            const model = gltf.scene;
            model.scale.set(1, 1, 1); // 必要に応じてモデルのスケールを調整
            scene.add(model);
        }, undefined, function (error) {
            console.error(error);
        });

        // カメラの位置を調整
        camera.position.z = 5;

        // OrbitControls を作成してカメラとレンダラーをリンク
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true; // 遅延効果を有効化
        controls.dampingFactor = 0.05; // 遅延の速度
        controls.screenSpacePanning = false; // 画面上でパン操作を無効化
        controls.maxPolarAngle = Math.PI / 2; // 縦方向の回転制限（下方向の回転を制限）

        // アニメーションループ
        function animate() {
            requestAnimationFrame(animate);
            
            // 必要に応じてコントロールを更新
            controls.update();

            renderer.render(scene, camera);
        }

        animate();

        // ウィンドウサイズ変更時にレンダラーとカメラを調整
        window.addEventListener('resize', () => {
            const width = window.innerWidth;
            const height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });
    </script>
</body>
</html>

貼り付けたら、

command + s (Mac)またはCtrl + s (Windows)

を押して、index.htmlと名前をつけて保存します。

デスクトップにtestという名前のフォルダを作成し、このフォルダに先ほど作成したmonkey.glbとindex.htmlを入れます。

Visual Studio Codeの左上のファイルのフォルダーを開くをクリックします。