Wonderland EngineのメッシュをOBJファイルとしてエクスポートする方法

ランタイムでメッシュを生成する際に、その結果を他のアプリケーションで検査することは有用です。特に、生成されたメッシュが全くレンダリングされない場合に役立ちます。

Wavefront OBJは非常にシンプルなテキストベースのフォーマットであり、Wonderland EngineのJavaScriptコンポーネントから出力することができます。

コードスニペット

以下のコードスニペットは、Meshを受け取り、位置とインデックスのためにOBJファイルを書き出し、最終的にファイルをプログラム的に自動ダウンロードします。

import {MeshAttribute} from '@wonderlandengine/api';

export function wleMeshToOBJ(wleMesh) {
    /* 位置の属性アクセサを取得します。
     * このスクリプトは、法線やテクスチャ属性を
     * エクスポートするように簡単に拡張できます。 */
    const positions = wleMesh.attribute(MeshAttribute.Position);

    const lines = [];
    for(let i = 0; i < positions.length; ++i) {
        const [x, y, z] = positions.get(i);
        lines.push(`v ${x} ${y} ${z}`);
    }

    const indexCount = wleMesh.indexData.length;
    for (let i = 0; i < indexCount;) {
        /* .objのインデックスは1から始まります (0ではありません) */
        lines.push(`f ${wleMesh.indexData[i++] + 1} ${wleMesh.indexData[i++] + 1} ${wleMesh.indexData[i++] + 1}`);
    }

    /* すべての行を連結し、バイナリブロブを生成してダウンロード */
    const blob = new Blob([lines.join('\n')], {type: 'text/plain'});
    const url = URL.createObjectURL(blob);

    /* ブロブをプログラム上で自動的に'download mesh.obj'としてダウンロード */
    const link = document.createElement('a');
    link.href = url;
    link.download = 'mesh.obj';

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}