はじめに

WebGLは、ブラウザ上で3Dグラフィックスを表示するための技術です。今回はWebGLを使って、3D空間でカメラを操作して探索できるアプリケーションを作成しました。（基本的にChat GPTで調べています）

出来あがったものがこちら

できること

移動: WASDキーを使って現在向いている方向に移動。カメラ位置は常に床の上に保持、高さは一定。左下のスライダーでスピード変更可能。
カメラ操作: クリックしながらマウスで操作。Qキーを押すとカメラの上下の向きが元に戻る。

使った技術とライブラリ

WebGL: ブラウザで3Dコンテンツを表示するための技術
Three.js: WebGLを簡単に扱うためのJavaScriptライブラリ

コードの概要

コード全文


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL 3D Object with Camera Control</title>
    <style>
        /* body と canvas のスタイルを簡潔にまとめる */
        body { margin: 0; font-family: Arial, sans-serif; }
        canvas { display: block; } /* Three.jsで描画を行うために自動的に生成される */

        /* 共通のスタイルをまとめる */
        .control-box {
            position: absolute;
            color: white;
            font-size: 16px;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 5px;
        }

        #instructions { top: 10px; left: 10px; }
        #coordinates { bottom: 60px; left: 10px; }
        #speedControl { bottom: 10px; left: 10px; }

        input[type="range"] { width: 200px; }
    </style>
</head>

<body>

    <!-- 操作方法の表示 -->
    <div id="instructions" class="control-box">
        <p><strong>操作方法：</strong></p>
        <ul>
            <li>視点:マウス(クリック)</li>
            <li>視点リセット:Q</li>
            <li>移動:WASD</li>
        </ul>
    </div>

    <!-- カメラ座標の表示 -->
    <div id="coordinates" class="control-box">
        <p>位置: X: 0, Y: 0, Z: 5</p>
    </div>

    <!-- スライダーの表示 -->
    <div id="speedControl" class="control-box">
        <label for="speedSlider">移動スピード:</label>
        <input type="range" id="speedSlider" min="0.01" max="1" step="0.01" value="0.1">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.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();
        // レンダラー(描画エンジン)のサイズをブラウザウィンドウの幅と高さにする
        renderer.setSize(window.innerWidth, window.innerHeight); 
        // レンダラーをHTMLに追加
        document.body.appendChild(renderer.domElement);

        // 背景色の設定
        scene.background = new THREE.Color(0x87CEEB); // 空色

        // ライトの設定
        const light = new THREE.DirectionalLight(0xffffff, 2);  // 光の色, 光の強さ
        light.position.set(10, 10, 10); // 光源の位置
        scene.add(light); // 光源をシーンに追加

        // 立方体1（光沢あり）
        const cube1 = new THREE.Mesh(
            new THREE.BoxGeometry(2, 1, 1),
            new THREE.MeshStandardMaterial({ 
                color: 0x00ff00,   // 緑色
                roughness: 0.2,    // 少し光沢がある
                metalness: 0.5     // 半金属
            })
        );
        cube1.position.set(-2, 0.5, 0);  // y座標を0.5に設定（地面から浮かせる）
        scene.add(cube1);

        // 立方体2（光沢なし）
        const cube2 = new THREE.Mesh(
            new THREE.BoxGeometry(1, 2, 1),
            new THREE.MeshStandardMaterial({ 
                color: 0xff0000,   // 赤色
                roughness: 1,      // 光沢なし
                metalness: 0       // 非金属
            })
        );
        cube2.position.set(0, 0.5, 0);    // y座標を0.5に設定
        scene.add(cube2);

        // 立方体3（光沢強）
        const cube3 = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 2),
            new THREE.MeshStandardMaterial({ 
                color: 0x0000ff,   // 青色
                roughness: 0.05,   // 非常に光沢が強い
                metalness: 1       // 金属的な質感
            })
        );
        cube3.position.set(2, 0.5, 0);    // y座標を0.5に設定
        scene.add(cube3);

        // 立方体(半透明)
        const cube4 = new THREE.Mesh(
            new THREE.BoxGeometry(2, 2, 1),
            new THREE.MeshStandardMaterial({
                color: 0x00ff00,
                opacity: 0.5,  // 50%透明
                transparent: true  // 透明にするための設定
            })
        );
        cube4.position.set(-3, 0.5, -4);   
        scene.add(cube4);

        // 立方体(発光)
        const cube5 = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshStandardMaterial({
                color: 0x00ff00,
                emissive: 0x00ff00,  // 緑色の発光を設定
                emissiveIntensity: 5  // 発光の強さ
            })
        );
        cube5.position.set(2, 2, -6);    // y座標を0.5に設定
        scene.add(cube5);

        // 床の作成
        const floor = new THREE.Mesh(
            new THREE.PlaneGeometry(500, 500), // 500 * 500 の平面
            new THREE.MeshBasicMaterial({ color: 0x2e8b57, side: THREE.DoubleSide })); // 平面の両面を描画
        floor.rotation.x = -Math.PI / 2; // 90度回転(そのままだと縦に描画される)
        scene.add(floor);
        // グリッド 全体のサイズ, 1マスの大きさ(分割数), グリッドの線の色
        scene.add(new THREE.GridHelper(500, 50, 0xFFFFFF, 0xFFFFFF)); 

        camera.position.z = 5;

        // マウス操作に関するフラグと変数
        let isMousePressed = false           // マウスが押されているかどうか
        let lastMouseX = 0, lastMouseY = 0;  // マウスの最後の位置を記録(これで移動量を出す)
        let rotationX = 0, rotationY = 0;    // 回転かくどを管理
        // 進行方向の管理(キーを押されたらtrue,離れたらfalseにする)
        const moveDirection = { forward: false, backward: false, left: false, right: false }; 
        let moveSpeed = 0.1; // 動く速さ(スライダーで調節される)

        // スライダーの値を取得して移動速度を更新
        document.getElementById('speedSlider').addEventListener('input', (event) => {
            moveSpeed = parseFloat(event.target.value);
        });

        // マウス操作
        // クリックしたとき(押し始め)
        document.addEventListener('mousedown', (event) => { 
            isMousePressed = true;           // マウスが置かれている状態を記録
            lastMouseX = event.clientX;      // マウスが押された時点でのx座標を記録
            lastMouseY = event.clientY;      // マウスが押された時点でのy座標を記録
        });  
        // クリックが外れた時(押し終わり)
        document.addEventListener('mouseup', () => {
             isMousePressed = false; 
            });
        // マウスを移動させたときに発火(if (isMousePressed)によってクリック中のみになる)
        document.addEventListener('mousemove', (event) => {
            if (isMousePressed) {
                rotationX += (event.clientX - lastMouseX) * 0.005;  // 現在-直前でマウスの移動量を計算
                rotationY -= (event.clientY - lastMouseY) * 0.005;  // 0.005の部分は回転感度の調整の係数
                camera.rotation.set(rotationY, rotationX, 0);  // x(上下),y(左右),z(傾き)
                lastMouseX = event.clientX;   // 現在のマウスの座標を記録
                lastMouseY = event.clientY;   
            }
        });



        // キーボード操作
        document.addEventListener('keydown', (event) => {
            if (event.key === 'w') moveDirection.forward = true;
            if (event.key === 's') moveDirection.backward = true;
            if (event.key === 'a') moveDirection.left = true;
            if (event.key === 'd') moveDirection.right = true;
            if (event.key === 'q') { rotationY = 0; camera.rotation.x = 0; } // カメラリセット
        });

        document.addEventListener('keyup', (event) => {
            if (event.key === 'w') moveDirection.forward = false;
            if (event.key === 's') moveDirection.backward = false;
            if (event.key === 'a') moveDirection.left = false;
            if (event.key === 'd') moveDirection.right = false;
        });



        // アニメーション
        function animate() {
            requestAnimationFrame(animate);   // 次のフレームをリクエスト

            const direction = new THREE.Vector3();
            camera.getWorldDirection(direction);    // カメラが向いている方向を取得
            direction.y = 0;        // Y軸(上下)方向の移動を制限
            direction.normalize();  // 正規化(ベクトルの長さを1にする) 

            // 前後移動
            if (moveDirection.forward) camera.position.addScaledVector(direction, moveSpeed);
            if (moveDirection.backward) camera.position.addScaledVector(direction, -moveSpeed);

            const right = new THREE.Vector3();  
            camera.getWorldDirection(right);           // カメラの向いている向きを取得
            right.cross(new THREE.Vector3(0, 1, 0));   // カメラの右方向を計算
            right.normalize();

            // 左右移動
            if (moveDirection.left) camera.position.addScaledVector(right, -moveSpeed);
            if (moveDirection.right) camera.position.addScaledVector(right, moveSpeed);

            camera.position.y = 1; // 高さ固定

            // カメラ座標の表示更新
            document.getElementById('coordinates').innerHTML = `<p>位置: X: ${camera.position.x.toFixed(2)}, Y: ${camera.position.y.toFixed(2)}, Z: ${camera.position.z.toFixed(2)}</p>`;

            renderer.render(scene, camera);
        }

        // アニメーションの開始
        animate();


        // ウィンドウサイズ変更対応
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;  // アスペクト比の更新
            camera.updateProjectionMatrix();   // 投影行列の更新（カメラの視覚的な変換を表現する行列）
            renderer.setSize(window.innerWidth, window.innerHeight); // レンダラーサイズの更新
        });

    </script>
</body>

</html>

シーンとカメラのセットアップ

最初に、THREE.SceneとTHREE.PerspectiveCameraを使って3D空間を作成し、カメラを配置。

        // シーン、カメラ、レンダラーの初期化
        const scene = new THREE.Scene();
        // ↓ カメラの設定。 視野角, アスペクト比, 近距離クリッピング, 遠距離クリッピング(それより近い(遠い)ものは描画されない)
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

レンダラーの設定

次に、THREE.WebGLRendererを使って、ブラウザ上にシーンを描画。レンダラーは、シーンとカメラの情報を元にブラウザに3Dグラフィックを描画する役割を果たす。

        const renderer = new THREE.WebGLRenderer();
        // レンダラー(描画エンジン)のサイズをブラウザウィンドウの幅と高さにする
        renderer.setSize(window.innerWidth, window.innerHeight); 
        // レンダラーをHTMLに追加
        document.body.appendChild(renderer.domElement);

背景色の設定とライトの設定

光の当たっている面が明るく、当たっていない面が暗くなる。

        // 背景色の設定
        scene.background = new THREE.Color(0x87CEEB); // 空色

        // ライトの設定
        const light = new THREE.DirectionalLight(0xffffff, 2);  // 光の色, 光の強さ
        light.position.set(10, 10, 10); // 光源の位置
        scene.add(light); // 光源をシーンに追加

立方体の作成

THREE.BoxGeometryを使って、いくつかの立方体を作成。半透明とか光沢とか発光とか。光沢についてはよくわからなかった。

立方体のコード


        // 立方体1（光沢あり）
        const cube1 = new THREE.Mesh(
            new THREE.BoxGeometry(2, 1, 1),
            new THREE.MeshStandardMaterial({ 
                color: 0x00ff00,   // 緑色
                roughness: 0.2,    // 少し光沢がある
                metalness: 0.5     // 半金属
            })
        );
        cube1.position.set(-2, 0.5, 0);  // y座標を0.5に設定（地面から浮かせる）
        scene.add(cube1);

        // 立方体2（光沢なし）
        const cube2 = new THREE.Mesh(
            new THREE.BoxGeometry(1, 2, 1),
            new THREE.MeshStandardMaterial({ 
                color: 0xff0000,   // 赤色
                roughness: 1,      // 光沢なし
                metalness: 0       // 非金属
            })
        );
        cube2.position.set(0, 0.5, 0);    // y座標を0.5に設定
        scene.add(cube2);

        // 立方体3（光沢強）
        const cube3 = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 2),
            new THREE.MeshStandardMaterial({ 
                color: 0x0000ff,   // 青色
                roughness: 0.05,   // 非常に光沢が強い
                metalness: 1       // 金属的な質感
            })
        );
        cube3.position.set(2, 0.5, 0);    // y座標を0.5に設定
        scene.add(cube3);

        // 立方体(半透明)
        const cube4 = new THREE.Mesh(
            new THREE.BoxGeometry(2, 2, 1),
            new THREE.MeshStandardMaterial({
                color: 0x00ff00,
                opacity: 0.5,  // 50%透明
                transparent: true  // 透明にするための設定
            })
        );
        cube4.position.set(-3, 0.5, -4);   
        scene.add(cube4);

        // 立方体(発光)
        const cube5 = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1),
            new THREE.MeshStandardMaterial({
                color: 0x00ff00,
                emissive: 0x00ff00,  // 緑色の発光を設定
                emissiveIntensity: 5  // 発光の強さ
            })
        );
        cube5.position.set(2, 2, -6);    // y座標を0.5に設定
        scene.add(cube5);

床とグリッドの追加

床の作成。3D空間内での位置を確認しやすくするため、GridHelperを使ってグリッド模様を追加。回転させないと床にならないことに注意。

        const floor = new THREE.Mesh(
            new THREE.PlaneGeometry(500, 500), // 500 * 500 の平面
            new THREE.MeshBasicMaterial({ color: 0x2e8b57, side: THREE.DoubleSide })); // 平面の両面を描画
        floor.rotation.x = -Math.PI / 2; // 90度回転(そのままだと縦に描画される)
        scene.add(floor);
        // グリッド 全体のサイズ, 1マスの大きさ(分割数), グリッドの線の色
        scene.add(new THREE.GridHelper(500, 50, 0xFFFFFF, 0xFFFFFF));

カメラ操作

マウス操作でカメラを回転させたり、WASDキーで移動させたり、Qキーでカメラの向きをリセットできるようにした。

        // マウス操作に関するフラグと変数
        let isMousePressed = false           // マウスが押されているかどうか
        let lastMouseX = 0, lastMouseY = 0;  // マウスの最後の位置を記録(これで移動量を出す)
        let rotationX = 0, rotationY = 0;    // 回転かくどを管理
        // 進行方向の管理(キーを押されたらtrue,離れたらfalseにする)
        const moveDirection = { forward: false, backward: false, left: false, right: false }; 
        let moveSpeed = 0.1; // 動く速さ(スライダーで調節される)

移動速度の調節

移動速度をスライダーで変更できるようにした。これで世界の端までいける。

        // スライダーの値を取得して移動速度を更新
        document.getElementById('speedSlider').addEventListener('input', (event) => {
            moveSpeed = parseFloat(event.target.value);
        });

マウス操作(カメラ操作)

マウスでカメラ操作。クリックを管理して、クリック中のみ動くようにした。

        // クリックしたとき(押し始め)
        document.addEventListener('mousedown', (event) => { 
            isMousePressed = true;           // マウスが置かれている状態を記録
            lastMouseX = event.clientX;      // マウスが押された時点でのx座標を記録
            lastMouseY = event.clientY;      // マウスが押された時点でのy座標を記録
        });  
        // クリックが外れた時(押し終わり)
        document.addEventListener('mouseup', () => {
             isMousePressed = false; 
            });
        // マウスを移動させたときに発火(if (isMousePressed)によってクリック中のみになる)
        document.addEventListener('mousemove', (event) => {
            if (isMousePressed) {
                rotationX += (event.clientX - lastMouseX) * 0.005;  // 現在-直前でマウスの移動量を計算
                rotationY -= (event.clientY - lastMouseY) * 0.005;  // 0.005の部分は回転感度の調整の係数
                camera.rotation.set(rotationY, rotationX, 0);  // x(上下),y(左右),z(傾き)
                lastMouseX = event.clientX;   // 現在のマウスの座標を記録
                lastMouseY = event.clientY;   
            }
        });

キーボード操作(移動)

wasdで移動。

        // キーボード操作
        document.addEventListener('keydown', (event) => {
            if (event.key === 'w') moveDirection.forward = true;
            if (event.key === 's') moveDirection.backward = true;
            if (event.key === 'a') moveDirection.left = true;
            if (event.key === 'd') moveDirection.right = true;
            if (event.key === 'q') { rotationY = 0; camera.rotation.x = 0; } // カメラリセット
        });

        document.addEventListener('keyup', (event) => {
            if (event.key === 'w') moveDirection.forward = false;
            if (event.key === 's') moveDirection.backward = false;
            if (event.key === 'a') moveDirection.left = false;
            if (event.key === 'd') moveDirection.right = false;
        });

アニメーション

画面の更新。

        // アニメーション
        function animate() {
            requestAnimationFrame(animate);   // 次のフレームをリクエスト

            const direction = new THREE.Vector3();
            camera.getWorldDirection(direction);    // カメラが向いている方向を取得
            direction.y = 0;        // Y軸(上下)方向の移動を制限
            direction.normalize();  // 正規化(ベクトルの長さを1にする) 

            // 前後移動
            if (moveDirection.forward) camera.position.addScaledVector(direction, moveSpeed);
            if (moveDirection.backward) camera.position.addScaledVector(direction, -moveSpeed);

            const right = new THREE.Vector3();  
            camera.getWorldDirection(right);           // カメラの向いている向きを取得
            right.cross(new THREE.Vector3(0, 1, 0));   // カメラの右方向を計算
            right.normalize();

            // 左右移動
            if (moveDirection.left) camera.position.addScaledVector(right, -moveSpeed);
            if (moveDirection.right) camera.position.addScaledVector(right, moveSpeed);

            camera.position.y = 1; // 高さ固定

            // カメラ座標の表示更新
            document.getElementById('coordinates').innerHTML = `<p>位置: X: ${camera.position.x.toFixed(2)}, Y: ${camera.position.y.toFixed(2)}, Z: ${camera.position.z.toFixed(2)}</p>`;

            renderer.render(scene, camera);
        }

        // アニメーションの開始
        animate();

画面サイズの変更への対応

ウィンドウのサイズが変わったときに、カメラのアスペクト比を更新。

        // ウィンドウサイズ変更対応
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;  // アスペクト比の更新
            camera.updateProjectionMatrix();   // 投影行列の更新（カメラの視覚的な変換を表現する行列）
            renderer.setSize(window.innerWidth, window.innerHeight); // レンダラーサイズの更新
        });

おわりに

WebGLとThree.jsを使うことで、ブラウザ上で簡単に3Dオブジェクトを描画し、インタラクティブなアプリケーションを作ることができました。

まだ単に空間を作って動けるようにしただけなので、他の3Dオブジェクトを追加したり、何かしらのアニメーションやエフェクトを加えたり、ちょっとしたミニゲームにしたり、いろいろやってみたいです。