【Three.js】Canvas 上で 3D行列計算結果を確認するサンプル

2024年1月4日2024年1月6日

どうもです、タドスケです。

最近、仕事で行列計算のコードに触る機会が出てきました。

しかし僕は日頃から公言しているとおり、物理数学が大の苦手なゲームプログラマーです。

ゲームプログラマーにとって必須のベクトル・行列計算すら、僕にとっては身構えてしまう存在。

これまでずっと避け続けてきましたが、さすがにそろそろ苦手意識をどうにかしたいなーと思いまして、ちょっとずつ復習をしています。

色々な Web サイト・本・動画を見て「わかった」ものの、「使える」レベルになるには、やはり自分の手でプログラムを書いて動かしてみるのが1番良さそうです。

どうせならブログ上でサクッと動かせる環境が欲しいなと思って調べたところ、『Three.js』なるライブラリがあることを知りました。

JavaScript と Canvas だけで動くので、これならブログ上でも実行できそう！

…ってなワケで、とりあえず ChatGPT にお願いして第一弾をサクッと作ってもらいました。

左上の 4×4 のボックスに行列の値を入力して「更新」ボタンを押すと、真ん中の立方体に乗算されます。
平行移動、回転、スケールなどの行列を作って、その結果をすぐに確認できます。

コードは以下です。
（html は省略しています）

let scene, camera, renderer, cube, light;

function init() {
    // シーン、カメラ、レンダラーの初期化
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

    // 照明の追加
    light = new THREE.DirectionalLight(0xffffff, 1.0);
    light.position.set(10, 10, 10);
    scene.add(light);
    scene.add(new THREE.AmbientLight(0xffffff, 0.5));

    camera.position.z = 5;

    // フォームのイベントリスナー
    document.getElementById('matrixForm').addEventListener('submit', updateMatrix);
}

function updateMatrix(event) {
    event.preventDefault();

    // HTML フォームから行列の値を取得
    let matrixValues = [];
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            let value = parseFloat(document.getElementById(`m${i}${j}`).value);
            if (isNaN(value)) value = i === j ? 1 : 0; // 空のフィールドは単位行列の値を使用
            matrixValues.push(value);
        }
    }

    // Three.js の Matrix4 に変換
    let matrix = new THREE.Matrix4();
    matrix.set(...matrixValues);

    // 立方体に変換行列を適用
    cube.matrixAutoUpdate = false;
    cube.matrix.copy(matrix);
    cube.matrix.decompose(cube.position, cube.quaternion, cube.scale); // 行列から位置、回転、スケールを更新
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

init();
animate();

使用したプロンプトは以下です。

あなたはプロの Web エンジニアです。

Web ブラウザ上で、3D の立方体を表示し、アフィン変換行列を掛け合わせた結果をリアルタイムで確認できるアプリを作成するのを手伝ってください。

仕様は以下です。