Aspose.3D FOSS
TypeScript
TypeScriptで3DシーンをglTF/GLBにエクスポートする方法

TypeScriptで3DシーンをglTF/GLBにエクスポートする方法

Aspose.3D FOSS は glTF 2.0 をインポートおよびエクスポート形式の両方としてサポートしています。同じ Scene オブジェクトは OBJ、FBX、STL、またはその他のソースファイルから生成でき、.gltf（JSON + 外部バイナリ）または .glb（単一バイナリコンテナ）へ、GltfSaveOptions のフラグを1つ設定することで書き出すことができます。

ステップバイステップ ガイド

ステップ 1: @aspose/3d をインストール 

npm install @aspose/3d

Node.js 18以降が有効であることを確認してください：

node --version   # must be >= 16.0.0

ステップ 2: Scene、GltfSaveOptions、GltfFormat をインポート 

import { Scene } from '@aspose/3d';
import { GltfSaveOptions, GltfFormat } from '@aspose/3d/formats/gltf';

GltfFormat は scene.save() に渡されるフォーマット記述子です。 GltfSaveOptions はすべてのエクスポート構成を保持します。

ソースファイル（例: OBJ）も読み込む場合は、対応するロードオプションをインポートしてください：

import { ObjLoadOptions } from '@aspose/3d/formats/obj';

ステップ 3: シーンの構築またはロード

オプション A: 既存のファイルからロード (OBJ → GLB 変換):

import { Scene } from '@aspose/3d';
import { ObjLoadOptions } from '@aspose/3d/formats/obj';
import { GltfSaveOptions, GltfFormat } from '@aspose/3d/formats/gltf';

const scene = new Scene();
scene.open('model.obj', new ObjLoadOptions());

オプション B: 最小限のシーンをプログラムで構築する:

import { Scene, Node, Mesh } from '@aspose/3d';
import { GltfSaveOptions, GltfFormat } from '@aspose/3d/formats/gltf';

const scene = new Scene();
const childNode = new Node('cube');
scene.rootNode.addChildNode(childNode);
// Attach geometry to childNode as needed

ステップ 4: GltfSaveOptions の構成

GltfSaveOptions は出力形式とエンコーディングの詳細を制御します。

const saveOpts = new GltfSaveOptions();

// Set to true for a single binary .glb file
// Set to false (default) for JSON .gltf + separate .bin
saveOpts.binaryMode = true;

設定できる追加オプション:

プロパティ型デフォルト効果
binaryModebooleanfalsetrue → GLB, false → glTF JSON
flipTexCoordVbooleantrueエンジン互換性のために UV の垂直軸を反転

ステップ5: scene.save() を使用して保存

出力パス、GltfFormat ディスクリプタ、および構成されたオプションを渡す：

import { Scene } from '@aspose/3d';
import { ObjLoadOptions } from '@aspose/3d/formats/obj';
import { GltfSaveOptions, GltfFormat } from '@aspose/3d/formats/gltf';

const scene = new Scene();
scene.open('model.obj', new ObjLoadOptions());

const saveOpts = new GltfSaveOptions();
saveOpts.binaryMode = true;   // produce .glb

scene.save('output.glb', GltfFormat.getInstance(), saveOpts);
console.log('Converted to GLB successfully');

代わりに JSON .gltf ファイルを生成するには:

saveOpts.binaryMode = false;
scene.save('output.gltf', GltfFormat.getInstance(), saveOpts);
console.log('Exported to glTF JSON successfully');

ステップ 6: 出力ファイルを確認する

出力ファイルが存在し、サイズがゼロでないことを確認してください：

import * as fs from 'fs';

const outputPath = 'output.glb';
const stats = fs.statSync(outputPath);
console.log(`Output file size: ${stats.size} bytes`);

if (stats.size === 0) {
    throw new Error('Export produced an empty file: check scene content');
}

往復検証のために、GLB を再読み込みし、ノード数を確認してください：

import { Scene } from '@aspose/3d';
import { GltfLoadOptions } from '@aspose/3d/formats/gltf';

const verify = new Scene();
verify.open('output.glb', new GltfLoadOptions());

let nodeCount = 0;
function countNodes(node: any): void {
    nodeCount++;
    for (const child of node.childNodes) countNodes(child);
}
countNodes(verify.rootNode);

console.log(`Round-trip verification: ${nodeCount} node(s) in output`);

一般的な問題と対策

OBJ material file not found after export
OBJ に保存する際、scene.save('output.obj') を使用すると、.mtl マテリアル ファイルが .obj ファイルと自動的に同じ場所に書き込まれます。出力ディレクトリが書き込み可能であり、両方のファイルが一緒に保持されていることを確認してください。

出力された .glb が予想より小さい / メッシュが欠落している
ロードされたシーンにエンティティがないノード（例: OBJ の空のグループ）がある場合、GLB にはそれらのノードのジオメトリが含まれません。保存する前に、mesh.controlPoints.length > 0 を使用して入力ファイルに実際のポリゴンデータがあることを確認してください。

モジュール ‘@aspose/3d/formats/gltf’ が見つかりません
Node.js 18以上を使用しており、@aspose/3dがエントリーポイントと同じnode_modulesにインストールされていることを確認してください。npm ls @aspose/3dを実行して、バージョンが24.12.0以降であることを確認します。

GltfFormat.getInstance() が undefined を返す
これは、メイン @aspose/3d パッケージとキャッシュされた古いバージョンとの間にバージョン不一致があることを示しています。node_modules と package-lock.json を削除し、再度 npm install を実行してください。

出力された GLB にテクスチャが欠落しています
binaryMode = true が自己完結型 GLB を生成するように設定されていることを確認してください。glTF JSON 出力の場合、テクスチャ画像ファイルは相対パスで参照されるため、出力ファイルと同じ場所に存在している必要があります。

型エラー: 型 ‘GltfSaveOptions’ の引数は割り当てできません
Scene と GltfSaveOptions の両方が同じインストール済みパッケージインスタンスからインポートされていることを確認してください。グローバル + ローカルの混在インストールはインターフェイスの不一致を引き起こす可能性があります。

よくある質問 (FAQ)

glTF と GLB の違いは何ですか？ glTF 2.0 JSON (.gltf) は、シーン グラフを人間が読める JSON ファイルとして保存し、別々の .bin バッファーや画像ファイルを使用します。GLB (.glb) は、すべてを単一のバイナリ コンテナにパッケージ化します。GLB には binaryMode = true、JSON glTF には false を設定します。

コードだけで完全に構築されたシーン（ソースファイルなし）をエクスポートできますか？ はい。Scene を作成し、Node オブジェクトを追加し、Mesh または他のエンティティをアタッチしてから、scene.save() を呼び出します。シーンはロードされたファイルから生成されている必要はありません。

glTF エクスポートはロスレスですか？
ジオメトリと変換については、はい。可能な限り、マテリアルは glTF PBR マテリアルプロパティにマッピングされます。独自の FBX マテリアル拡張は完全にラウンドトリップできない場合があります。

STL または 3MF にエクスポートできますか？ はい。パターンは同一です。対応するフォーマットの *SaveOptions と *Format.getInstance() をインポートしてください：

import { StlSaveOptions, StlFormat } from '@aspose/3d/formats/stl';
const opts = new StlSaveOptions();
scene.save('output.stl', StlFormat.getInstance(), opts);

scene.save() は非同期で実行されますか？
いいえ。scene.save() は同期的です。大規模なエクスポート中にイベントループのブロックを回避する必要がある場合は、ワーカースレッドでラップしてください。

Node.js のサポートバージョンは何ですか？
Node.js 18、20、そして 22+。Node.js 16 およびそれ以前はサポートされていません。

参照

 日本語